<!doctype html>
<html class="no-js" lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>Variant HTML Builder by Medium Rare</title>
		<link rel="stylesheet" href="css/variant-icons.css">
		<link rel="stylesheet" href="css/variant-social-icons.css">
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/style.css">
		<link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">
				
		
        <link href="theme/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
        <link href="theme/css/themify-icons.css" rel="stylesheet" type="text/css" media="all">
        <link href="theme/css/flexslider.css" rel="stylesheet" type="text/css" media="all">
        <link href="theme/css/lightbox.min.css" rel="stylesheet" type="text/css" media="all">
        <link href="theme/css/ytplayer.css" rel="stylesheet" type="text/css" media="all">
        <link href="theme/css/theme.css" rel="stylesheet" type="text/css" media="all">
        <link href="../css/custom.css" rel="stylesheet" type="text/css" media="all">
        <link href="http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600" rel="stylesheet" type="text/css">

        <style>
        	.instafeed:before{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ''; z-index: 4; }
        	.background-image-holder{ transition: all 0s !important; }
        	.viu{ background: #ffffff; }
        	.image-edge .vnu, .imade-edge img{ z-index: 50; }
        	nav.absolute{ z-index: 20; padding-left: 48px; }
        	.boxed-layout .viu{ background: #eee; }
        	.boxed-layout nav.absolute{ max-width: 1366px; left: 0; right: 0; margin: 0 auto; }
        	.nav-bar .vnu{ max-height: 60%; display: inline-block; }
        	.masonry-loader.fadeOut{ display: none; }
        	section.projects > .masonry .project:nth-of-type(2) .vnw{ padding-top: 56px;}
        	.button-tabs .tabs > li{ margin-left: 3px; margin-right: 3px; }
        	.main-container.reveal-nav{ left: 48px; }
        	.menu > li ul{ z-index: 10000000; }
        	input[type="submit"] { margin-bottom: 24px; }
        	.vnj.reveal-nav{  transform: translate3d(-50vw, 0, 0);  -webkit-transform: translate3d(-50vw, 0, 0);  -moz-transform: translate3d(-50vw, 0, 0); }
        	.btn{ user-select: text !important; -webkit-user-select: text !important; }
        	.offscreen-container .close-nav{ position: absolute; right: 50px; float: right; display: block; padding: 20px; text-align: right; top: 0; z-index: 10; font-size: 20px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; opacity: .5; }
        </style>
		
		
		<style>
			.vhc{position:fixed;width:100%;height:100%;z-index:9999;background:#2b2b2b;font-family:Roboto,"Helvetica Neue",Helvetica,Helvetica,Arimo,Arial,sans-serif!important;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;opacity:1}.vhb{position:absolute;top:50%;left:50%;width:200px;height:40px;margin-left:-100px;margin-top:-20px;z-index:2}.vhb img{width:100%}.vha{position:absolute;bottom:40px;left:50%;width:200px;margin-left:-100px;text-align:center;color:#fff;font-size:13px}.vha span{display:block;line-height:19px;opacity:.5}.vlb{max-width:60px;display:inline-block;margin-bottom:12px;opacity:.5}.vla{position:absolute;width:500px;top:80px;margin-left:-250px;left:50%;overflow:hidden;text-align:center;opacity:0;transition:all .3s ease;-webkit-transition:all .3s ease}.vla.vhr{opacity:1}.vlc{background:#333;color:#eee;padding:24px;border-radius:2px}.vlc .oi{display:inline-block;margin-right:8px;font-size:18px;color:#f6f6f6}.vlc p{display:inline-block}.vld{cursor:wait;background-color:transparent;opacity:.3;border-radius:30px;animation:loading .5s infinite linear;-moz-animation:loading .5s infinite linear;-webkit-animation:loading .5s infinite linear;border:5px solid #fff;border-top:5px solid transparent;border-left:5px solid transparent;width:30px;height:30px;position:absolute;left:50%;margin-left:-15px;top:50%;margin-top:50px}@keyframes loading{0%{transform:rotate(0deg);-moz-transform:rotate(0deg)}100%{transform:rotate(360deg);-moz-transform:rotate(360deg)}}@-moz-keyframes loading{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@-webkit-keyframes loading{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}} .vnu{ display: inline-block; }
		</style>

	</head>
	<body mrv_namespace="medium.rare.foundry" mrv_contenttarget=".main-container" mrv_navtarget=".nav-container" mrv_footertarget=".main-container">
	
		<div class="vhc vhq">
			
			<div class="vla">
				<ul class="slides">
					<li>
						<div class="vlc">
							<span class="oi" data-glyph="lightbulb"></span>
							<p>
								Double-click icons to show the icon chooser.
							</p>
						</div>
					</li>
					<li>
						<div class="vlc">
							<span class="oi" data-glyph="lightbulb"></span>
							<p>
								Right-click elements on the page to edit them.
							</p>
						</div>
					</li>
					
					<li>
						<div class="vlc">
							<span class="oi" data-glyph="lightbulb"></span>
							<p>
								Rename sections in the sidebar to enable them as in-page links.
							</p>
						</div>
					</li>
					
					<li>
						<div class="vlc">
							<span class="oi" data-glyph="lightbulb"></span>
							<p>
								Export your pages as Variant files for later editing.
							</p>
						</div>
					</li>
					
					<li>
						<div class="vlc">
							<span class="oi" data-glyph="lightbulb"></span>
							<p>
								Export all your pages as HTML in the pages tab.
							</p>
						</div>
					</li>
				</ul>
			</div>
		
			<div class="vld">
			
			</div>
		
			<div class="vhb">
				<img alt="Variant HTML Page Builder" src="img/full-logo.png">
			</div>
			
			<div class="vha">
				<a target="_blank" href="http://www.mediumra.re/"><img class="vlb" alt="Variant HTML Page Builder" src="img/mrare.png"></a>
				<span>&copy; Copyright 2015 Medium Rare<br>All Rights Reserved</span>
			</div>
			
			<div class="vjg"></div>
		</div>
		
		<div class="vhv vba">
			
			<div class="vjc vjf vle">

				<div class="vlf">
					<ul>
						<li title="Pages" class="vlg vfp"><span class="oi" data-glyph="file"></span></li>
						<li title="Content" class="vlh vhr"><span class="oi" data-glyph="layers"></span></li>
						<li title="Style" class="vlj"><span class="oi" data-glyph="brush"></span></li>
					</ul>
					
					<div class="vll">
					
						<div title="Variant Settings" class="vlm">
							<span class="oi" data-glyph="cog"></span>
						</div>
						
						<div title="Lock Sidebar" class="vgw vhq">
							<span class="oi" data-glyph="lock-unlocked"></span>
						</div>
					</div>
					
				</div>
				
				<div class="vkm vjz">
					<div class="vgx">
						
					<div class="vlo vlp">
					
						<div class="vlq">
							<span>Variant Pages</span>
						</div>
						
						<div class="vhs vgc">Save Page As</div>
						<div class="vhs ved">Import</div>
						<input type="file" class="vef" name="vef[]">
						
						<div class="vmd">
						
							<div class="vfw empty-vfw">
								
							</div>
						</div>
						
						<div class="vls">
							
							<div class="vlt">
								<span>Export</span><span class="oi" data-glyph="caret-bottom"></span>
								<div class="vlu">
									<div class="vah vhs vaj vil">.html</div>
									<div class="vdi vhs vaj vix">.variant</div>
								</div>
							</div>
					
						</div>
					
					</div>
					
					<div class="vlv vlp vhr">
					
						<div class="vlq">
							<span class="vcr">Page Content</span>
						</div>
					
						<div class="vlw">
							<span class="vei vlx" contenteditable="true">Edit title tag</span>
							<span class="oi" data-glyph="pencil"></span>
						</div>
						
						<div class="vmd">
						
							<div class="vho">
								<span class="vly oi" data-glyph="compass">Navigation Type</span>
								<ul class="vfj">
									
								</ul>
								<ul class="vfn">
									<li class="vfo">No Nav</li>
								</ul>
							</div>
					
							<div class="vho">
								<span class="vly oi" data-glyph="expand-down">Footer Type</span>
								<ul class="vdm">
									
								</ul>
								<ul class="vfk">
									<li class="vfl">No Footer</li>
								</ul>
							</div>
							
							<div class="vem empty-vem">
							</div>

							<div class="vac">
								<span></span>
							</div>
							
						</div>
						
						<div class="vgr">
							<span class="vhq">SHOW</span>
							<span class="oi" data-glyph="trash"></span>
						</div>
						
						<div class="vad">
						
				
							<div class="vgt">
								
								<div class="vlz">
									<div class="vma">
										<span>Filter</span>
									</div>
								
									<div class="vgi">
										<div class="vgh vhr" vbp="*">
											Show All
										</div>						
									</div>
								</div>
							</div>
				
							<div class="vgm">
							</div>
				
			
						</div>
						
						<div class="vls">
						
							<div class="vdq">
								<span class="vhq">Get HTML</span>
							</div>		
							
						</div>
					
						
					</div>
					
					<div class="vmb vlp">
					
						<div class="vlq">
							<span>Page Style</span>
						</div>
						
						<div class="vmd vnb empty-vmd">
			
							<div class="vho vmu vih">
								<span class="vly oi" data-glyph="droplet">Colour Scheme</span>
								<ul class="vay">
									
								</ul>
							</div>

							<div class="vho vmy vih">
								<span class="vly vmz oi" data-glyph="text">Typography</span>
								<ul class="vms">
									
								</ul>
							</div>
						
						</div>
						
						<div class="vls">
						
							<div class="vdq">
								<span class="vhq">Get HTML</span>
							</div>
							
						</div>
					
	
					</div>
					
				</div>
				</div>
				
						
			</div>
			
			<div class="viu">
			
			</div>
			
			<div class="vhm">
				<div class="vet vih vhe"><span>Load Previous Page</span></div>
				<div class="vhd vih vhe"><span>Start New Page</span></div>
			</div>
			
		</div>
		
		<div class="vaf vin vds">
			<div class="vfa">
				<span class="vjl vag"></span>
				<i class="variant-icon variant-close-circle vex"></i>
			</div>
			
			<div class="vew">
				<p class="vae">
				
				</p>
			</div>
			<div class="vjp">
				<div class="vhs vak vix vex">Ok</div>
			</div>
			
		</div>
		
		<div class="vfc vin vds">
				<div class="vfa">
					<span class="vjl">Save custom navigation</span>
					<i class="variant-icon variant-close-circle vex"></i>
				</div>
				
				<div class="vew">
					<p>
						Give this nav menu a name so that you can retrieve it from 'Navigation Styles' at any time later on.	
					</p>
					<div class="vej">
						<i class="oi" data-glyph="compass"></i>
						<input type="text" placeholder="Navigation Name" class="vgb vez">
					</div>
				</div>
				
				<div class="vjp">
					<div class="vhs vex val vil">Cancel</div>
					<div class="vhs vga vak vix">Save</div>
				</div>
				
			</div>
			
		<div class="vfb vin vds">
			<div class="vfa">
				<span class="vjl">Save custom footer</span>
				<i class="variant-icon variant-close-circle vex"></i>
			</div>
			
			<div class="vew">
				<p>
					Give this footer a name so that you can retrieve it from 'Footer Styles' at any time later on.	
				</p>
				<div class="vej">
					<i class="oi" data-glyph="expand-down"></i>
					<input type="text" placeholder="Footer Name" class="vfz vez">
				</div>
			</div>
			
			<div class="vjp">
				<div class="vhs vex val vil">Cancel</div>
				<div class="vhs vfy vak vix">Save</div>
			</div>
			
		</div>
		
		<div class="vge vin vds">
			<div class="vfa">
				<span class="vjl">Save current page</span>
				<i class="variant-icon variant-close-circle vex"></i>
			</div>
			
			<div class="vew">
				<p>
					Name and save the current page for later use.
				</p>
				<div class="vej">
					<i class="oi" data-glyph="file"></i>
					<input type="text" placeholder="Page Name" class="vgf vez">
				</div>
			</div>
			
			<div class="vjp">
				<div class="vhs vex val vil">Cancel</div>
				<div class="vhs vgd vak vix">Save</div>
			</div>
			
		</div>
		
		<div class="vcw vin">
			<div class="vfa">
				<span class="vjl">Edit Link </span><span class="vcq"></span>
			</div>
			
			<div class="vew">
				<div class="vej vgp">
					<span>Inner link:</span>
					<select class="veh vja">
						<option value="">Select</option>
					</select>
				</div>
				<div class="vej">
					<span>Edit link href:</span>
					<span class="oi" data-glyph="link-intact"></span>
					<input type="text" class="vcu vez">
					<input type="text" class="vcv vez vih">
				</div>
				<div class="vej">
					<span>Open in:</span>
					<span class="oi" data-glyph="browser"></span>
					<select class="vcy vja">
						<option class="vcz edit-link-target-_blank-mrv" value="_blank">New Tab</option>
						<option class="vcz edit-link-target-_self-mrv" value="_self" selected="selected">Own Tab</option>
					</select>
				</div>
			</div>
			
			<div class="vjp">
				<div class="vhs vex val vil">Cancel</div>
				<div class="vhs vcx vak vix">Save</div>
			</div>
			
		</div>
		
		<div class="vcl vin">
			<div class="vfa">
				<span class="vjl">Edit Image</span>
				<i class="variant-icon variant-close-circle vex"></i>
			</div>
			
			<div class="vew">
				<div class="vhs vhp vaj vil"><span class="oi" data-glyph="grid-three-up"></span></div>
				<div class="vea">
					<div class="vey">
						<div class="vej">
							<span>Edit image src:</span>
							<span class="oi" data-glyph="image"></span>
							<input type="text" placeholder="Image 'src' value" class="vco vez">
						</div>
						
						<div class="vej">
							<span>Edit image alt:</span>
							<span class="oi" data-glyph="tags"></span>
							<input type="text" placeholder="Image 'alt' value" class="vcf vez">
						</div>
							
						<input class="vck vih" type="text">
					</div>
				
					<div class="vey">
						<div class="vcm">
							<img alt="Edit Image" src="" class="vcp">
							<span class="veb">1280x800</span> 
						</div>
					</div>
			
					<div class="vjp">
						<div class="vhs vex val vil">Cancel</div>
						<div class="vhs vcn vak vix">Save</div>
					</div>
				</div>
				
				
			</div>
			
			<div class="vdz" vbv="app1.jpg,app1.png,app2.jpg,app3.jpg,app4.jpg,arch1.jpg,arch1.png,arch2.jpg,arch3.jpg,arch4.jpg,arch5.jpg,arch6.jpg,avatar1.png,avatar2.png,avatar3.png,avatar4.png,avatar5.png,avatar6.png,blog-single-2.jpg,blog-single-3.jpg,blog-single-4.jpg,blog-single.jpg,c1.png,c2.png,c3.png,c4.png,capital-t-1.jpg,capital-t-2.jpg,capital-t-3.jpg,capital-t-4.jpg,capital-t-5.jpg,capital-t-6.jpg,capital-t-7.jpg,capital-t-8.jpg,capital2.jpg,capital3.jpg,capital4.jpg,capital5.jpg,cover1.jpg,cover2.jpg,cover5.jpg,cover6.jpg,cover7.jpg,cover8.jpg,cover9.jpg,cover10.jpg,cover11.jpg,cover12.jpg,cover13.jpg,cover14.jpg,cover15.jpg,cover16.jpg,event1.jpg,hero1.jpg,home-2-1.jpg,home-2-1.png,home-2-2.jpg,home-2-3.jpg,home-2-4.jpg,home-2-5.jpg,home-2-6.jpg,home-2-7.jpg,home-2-8.jpg,home-2-9.jpg,home-4-1.jpg,home1.jpg,home2.jpg,home3.jpg,home4.jpg,home5.jpg,home6.jpg,home7.jpg,home8.jpg,home10.jpg,home11.jpg,home12.jpg,home13.jpg,home14.jpg,home15.jpg,home16.jpg,home17.jpg,home18.jpg,home19.jpg,home20.jpg,home21.jpg,home22.jpg,home23.jpg,intro1.jpg,l1.png,l2.png,l3.png,l4.png,logo-dark.png,logo-light.png,logo-p-dark.png,music1.jpg,music2.jpg,nav-dark.jpg,nav-info.jpg,nav-light.jpg,nav-trans.jpg,page-coming-soon.jpg,page-register.jpg,phone1.png,phone2.png,phot1.jpg,phot2.jpg,phot3.jpg,project-case-study-1.jpg,project-case-study-2.jpg,project-case-study-3.jpg,project-case-study-4.jpg,project-single-1.jpg,project-single-2.jpg,project-single-3.jpg,project-single-4.jpg,project-single-5.jpg,project-single-6.jpg,prop1.jpg,prop2.jpg,prop3.jpg,prop4.jpg,prop5.jpg,prop6.jpg,resto1.jpg,resto2.jpg,resto3.jpg,resto4.jpg,resto5.jpg,resto6.jpg,screenshot.jpg,screenshot2.jpg,shop-product-1.jpg,shop-product-2.jpg,shop-product-3.jpg,shop-product-4_1.jpg,shop-product-4_2.jpg,shop-product-4.jpg,shop-product-5.jpg,shop-product-6.jpg,shop-product-7.jpg,shop-product-8.jpg,shop-product-9.jpg,shop-product-10.jpg,shop-product-11.jpg,shop-product-12.jpg,shop-product-13.jpg,shop-widget-1.png,shop-widget-2.png,signature.png,small1.jpg,small2.jpg,stars.png,team-1.jpg,team-2.jpg,team-3.jpg,variant-logo.png,vent1.jpg,vent1.png,vent2.jpg,vent2.png,vent3.jpg,vent4.jpg,vent5.jpg,wide-1.jpg">
				<input type="file" class="vch" name="vci[]" multiple="multiple">
				<div class="vdx">
				</div>
				<div class="vhs vee">Import Images</div>
			</div>
			
			
		</div>
		
		<div class="vde vin vdo">
			<div class="vfa">
				<span class="vjl">Edit Video Source</span>
				<i class="variant-icon variant-close-circle vex"></i>
			</div>
			
			<div class="vew">
				<div class="vej">
					<span>Edit MP4 Source:</span>
					<span class="oi" data-glyph="video"></span>
					<input type="text" class="vda vez">
				</div>
				
				<div class="vej">
					<span>Edit WEBM Source:</span>
					<span class="oi" data-glyph="video"></span>
					<input type="text" class="vdg vez">
				</div>
				
				<div class="vej">
					<span>Edit OGV Source:</span>
					<span class="oi" data-glyph="video"></span>
					<input type="text" class="vdb vez">
					<input class="vih vdd" type="text">

				</div>
			</div>
			<div class="vjp">
				<div class="vhs vex val vil">Cancel</div>
				<div class="vhs vdf vak vix">Save</div>
			</div>
			
		</div>
		
		<div class="vcd vin">
			<div class="vfa">
				<span class="vjl">Edit Icon</span>
				<i class="variant-icon variant-close-circle vex"></i>
			</div>
			
			<div class="vew">
				<div class="vox">
					<span class="oi" data-glyph="magnifying-glass"></span>
					<input type="text" class="vok vez" placeholder="Filter Icons">
				</div>
				<a href="#" class="vhs vol vih">clear</a>
				<div class="vce">

					
				</div>
			</div>
			
			<div class="vjp">
				<input id="vgo" class="vih" type="text">
				<div class="vhs vex vcc vak vix">Done</div>
			</div>
			
		</div>
		
		<div class="vdr vin">
			<div class="vfa">
				<span class="vjl">HTML Source Code</span>
				<i class="variant-icon variant-close-circle vex"></i>
			</div>
			
			<div class="vew">
				<div class="vft">
					<textarea class="vfu" cols="256" readonly="readonly" wrap="soft">
					</textarea>
				</div>
			</div>
			
			<div class="vjp">
				<div class="vhs vgn vaj vil">Select All</div>
				<div class="vhs vgy vaj vil">Download HTML file</div>
				<div class="vhs vex vak vix">Done</div>
			</div>
			
		</div>
		
		<div class="global-vfr vin vkf">
			<img alt="Logo" src="img/full-logo.png">
			<div class="vew">
				<div class="vhs vap val">Clear Navs</div>
				<div class="vhs vao val">Clear Footers</div>
				<div class="vhs vaq val">Clear Pages</div>
				<div class="vhs van val">Delete All</div>
			</div>
			<img alt="Medium Rare" src="img/mrare.png">
			<p>
				&copy; Copyright <span class="vkg">2014</span> Medium Rare
			</p>
		</div>
		
		<div class="vbi vin vdo">
			<div class="vfa">
				<span class="vjl vbk"> </span>
				<i class="variant-icon variant-close-circle vex"></i>
			</div>
			
			<div class="vew vbd">
				<p class="vbh"></p>
				
				<div class="vej">
					<span class="vbf"> </span>
					<span class="oi vkh" data-glyph=""></span>
					<input type="text" class="vbg vez">
					<input type="text" class="vbe vih">
					<input type="text" class="vbc vih">
				</div>
			</div>
			
			<div class="vjp">
				<div class="vhs vex val vil">Cancel</div>
				<div class="vhs vbj vak vix">Save</div>
			</div>
			
		</div>
		
		
		
		<div class="vhw vjr">
				<div class="vau">element type</div>
				<div class="vki vih vaw vav vfq">Options &gt;</div>
				<div class="vgk vih vaw vav vfq oi"></div>
				<div class="vdh vih vaw vav vfq oi"></div>
				<div class="vct vih vaw vav vfq">Edit Link</div>
				<div class="vcg vih vaw vav vfq">Edit Image</div>
				<div class="vdc vih vaw vav vfq">Edit Video Source</div>
				<div class="vcc vih vaw vav vfq">Choose Icon</div>
				<div class="veg vih vaw vav vfq">Expand Column</div>
				<div class="vbt vih vaw vav vfq">Shrink Column</div>
				<div class="vas vih vaw vav vfq">Clone Whole Slide</div>
				<div class="vcb vih vaw vav vfq">Delete Whole Slide</div>
				<div class="nav-class-context-options"></div>
				<div class="var vaw vav">Clone</div>
				<div class="vbw vaw vav">Remove</div>
				<ul class="vnc context vih">
				
				</ul>
			</div>
		
		<div id="vgg" class="vih">
			
<section id="variant-slider-1" class="vim" vbp="slider,fullscreen" vbr="Fullscreen Slider">
    <section class="cover fullscreen image-slider slider-all-controls controls-inside parallax">
        <ul class="slides">
            <li class="overlay image-bg">
                <div class="background-image-holder">
                    <img alt="image" class="background-image" src="../img/home22.jpg">
                </div>
                <div class="container v-align-transform">
                    <div class="row">
                        <div class="col-md-6 col-sm-8">
                            <h1 class="mb40 mb-xs-16 large">Your Modular Design Toolkit.</h1>
                            <h6 class="uppercase mb16">A complete block-based solution</h6>
                            <p class="lead mb40">
                                Build beautiful, contemporary sites in just moments
                                <br>with Foundry and Variant Page Builder.
                            </p>
                            <a class="btn btn-lg" href="#">Start Exploring</a>
                        </div>
                    </div>
                    
                </div>
                
            </li>
        </ul>
    </section>
</section>

<section id="variant-slider-11" class="vim" vbp="slider" vbr="Slider w/ More Text">
    <section class="image-slider slider-all-controls controls-inside parallax pt0 pb0 height-70">
        <ul class="slides">
            <li class="overlay image-bg">
                <div class="background-image-holder">
                    <img alt="image" class="background-image" src="../img/home-2-8.jpg">
                </div>
                <div class="container v-align-transform">
                    <div class="row text-center">
                        <div class="col-md-10 col-md-offset-1">
                            <h2 class="mb-xs-16">Meet Foundry, the cleverest way<br class="hidden-sm"> to build your next site.</h2>
                            <p class="lead mb40">
                                Build beautiful, contemporary sites in just moments
                                <br>with Foundry and Variant Page Builder.
                            </p>
                            <a class="btn btn-lg" href="#">Start Exploring</a>
                            <a class="btn btn-lg btn-filled" href="#">Purchase</a>
                        </div>
                    </div>
                    
                </div>
                
            </li>
        </ul>
    </section>
</section>

<section id="variant-slider-2" class="vim" vbp="header,fullscreen,video" vbr="Embed Video Modal" icons="youtube-vimeo">
    <section class="fullscreen cover parallax image-bg overlay">
        <div class="background-image-holder">
            <img alt="image" class="background-image" src="../img/home-2-1.jpg">
        </div>
        <div class="container v-align-transform">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h1 class="mb16">Foundry is a complete design
                        <br class="hidden-sm"> toolkit, perfect for your next project</h1>
                    <h6 class="uppercase mb32">Modular Design For Absolute Freedom.</h6>
                    <div class="modal-container">
                        <div class="play-button btn-modal inline large"></div>
                        <div class="foundry_modal no-bg">
                            <iframe data-provider="vimeo" data-video-id="25737856" data-autoplay="1"></iframe>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-slider-12" class="vim" vbp="header,fullscreen" vbr="Image & Paragraph">
    <section class="cover fullscreen image-slider slider-arrow-controls controls-inside parallax">
        <ul class="slides">
            <li class="overlay image-bg">
                <div class="background-image-holder">
                    <img alt="image" class="background-image" src="../img/cover7.jpg">
                </div>
                <div class="container v-align-transform">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center">
                            <img alt="Logo" class="image-small mb8" src="../img/logo-light.png">
                            <h6 class="uppercase mb32">Modular Design For Absolute Freedom.</h6>
                            <p class="text-justify mb0">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </p>
                        </div>
                    </div>
                    
                </div>
                
            </li>
        </ul>
    </section>
</section>

<section id="variant-slider-3" class="vim" vbp="header,fullscreen,form" vbr="Fullscreen Form" icons="mailchimp-cmonitor">
    <section class="cover fullscreen overlay parallax">
        <div class="background-image-holder">
            <img alt="image" class="background-image" src="../img/home13.jpg">
        </div>
        <div class="container v-align-transform">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
                    <h1 class="mb8">Meet Foundry, Your Design Toolkit.</h1>
                    <p class="lead mb48">
                        Perfect for those advertising a new product or service who wish to drive subscribers.
                    </p>
                    <form class="form-newsletter thirds" data-success="Thanks for your submission, we will be in touch shortly." data-error="Please fill all fields correctly.">
                        <input type="text" name="name" class="validate-required signup-name-field" placeholder="Your Name">
                        <input type="text" name="email" class="validate-required validate-email signup-email-field" placeholder="Email Address">
                        <button type="submit">Keep Me Informed</button>
                        <p class="sub text-center">
                            By signing up, you agree to our
                            <a href="#">Terms Of Service</a>
                        </p>
                        <iframe srcdoc="<!-- Begin MailChimp Signup Form --><link href=&quot;https://cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;><style type=&quot;text/css&quot;>    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */</style><div id=&quot;mc_embed_signup&quot;><form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=94d040322a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>    <div id=&quot;mc_embed_signup_scroll&quot;>    <h2>Subscribe to our mailing list</h2><div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span></label>    <input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-FNAME&quot;>First Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-LNAME&quot;>Last Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;></div>    <div id=&quot;mce-responses&quot; class=&quot;clear&quot;>        <div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div>        <div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div>    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->    <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_94d040322a&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>    <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>    </div></form></div><script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><!--End mc_embed_signup-->" class="mail-list-form">
                        </iframe>
                    </form>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-slider-4" class="vim" vbp="header" vbr="Image Logo">
    <section class="pt240 pb240 parallax image-bg overlay bg-light">
        <div class="background-image-holder">
            <img alt="image" class="background-image" src="../img/home19.jpg">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <img alt="Pic" src="../img/logo-dark.png" class="image-small">
                </div>
            </div>
            
        </div>
        
        <div class="align-bottom text-center">
            <ul class="list-inline social-list mb24">
                <li>
                    <a href="#">
                        <i vht="li" class="ti-twitter-alt"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i vht="li" class="ti-facebook"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i vht="li" class="ti-dribbble"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i vht="li" class="ti-vimeo-alt"></i>
                    </a>
                </li>
            </ul>
        </div>
    </section>
</section>

<section id="variant-slider-5" class="vim" vbp="header,fullscreen,video" vbr="Fullscreen Image Text" icons="youtube-vimeo">
    <section class="fullscreen image-bg">
        <div class="background-image-holder">
            <img alt="image" class="background-image" src="../img/vent1.jpg">
        </div>
        <div class="container v-align-transform">
            <div class="row">
                <div class="col-sm-8 col-md-6 mb24">
                    <h6 class="uppercase">Adventure Travel With Heart</h6>
                    <img alt="Pic" src="../img/vent1.png">
                </div>
                <div class="col-sm-12">
                    <div class="modal-container pull-left">
                        <div class="play-button btn-modal inline"></div>
                        <div class="foundry_modal no-bg">
                            <iframe data-provider="vimeo" data-video-id="25737856" data-autoplay="1"></iframe>
                        </div>
                    </div>
                    
                    <p class="lead inline-block p32 p0-xs pt8">
                        Take a vacation on the wild side with Foundry
                        <br> Adventure Tours and never look at life the same.
                    </p>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-slider-6" class="vim" vbp="header,fullscreen" vbr="Image & Paragraph">
    <section class="cover fullscreen image-slider slider-arrow-controls controls-inside parallax">
        <ul class="slides">
            <li class="overlay image-bg">
                <div class="background-image-holder">
                    <img alt="image" class="background-image" src="../img/resto1.jpg">
                </div>
                <div class="container v-align-transform">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <img alt="Logo" class="image-small" src="../img/logo-light.png">
                        </div>
                    </div>
                    
                </div>
                
                <div class="align-bottom text-center">
                    <a class="btn btn-white mb32" href="#">Reserve A Table</a>
                    <ul class="list-inline social-list mb24">
                        <li>
                            <a href="#" vht="parent">
                                <i vht="li" class="ti-twitter-alt"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" vht="parent">
                                <i vht="li" class="ti-facebook"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" vht="parent">
                                <i vht="li" class="ti-dribbble"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" vht="parent">
                                <i vht="li" class="ti-vimeo-alt"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </section>
</section>

<section id="variant-slider-7" class="vim" vbp="header,fullscreen" vbr="Color Treated">
    <section class="fullscreen image-bg parallax background-multiply">
        <div class="background-image-holder">
            <img alt="image" class="background-image" src="../img/capital5.jpg">
        </div>
        <div class="container v-align-transform">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="thin mb0">A San Francisco based venture capital firm funding driven and innovative entrepenuers.</h1>
                </div>
            </div>
            
        </div>
        
        <div class="align-bottom text-center">
            <a class="btn btn-white mb32" href="#">Pitch Us</a>
            <ul class="list-inline social-list mb24">
                <li>
                    <a href="#">
                        <i vht="li" class="ti-twitter-alt"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i vht="li" class="ti-facebook"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i vht="li" class="ti-dribbble"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i vht="li" class="ti-vimeo-alt"></i>
                    </a>
                </li>
            </ul>
        </div>
    </section>
</section>

<section id="variant-slider-8" class="vim" vbp="header,video" vbr="Text & Video" icons="youtube-vimeo">
    <section class="pt120 pb120 image-bg overlay">
        <div class="background-image-holder">
            <img alt="Background" class="background-image" src="../img/event1.jpg">
        </div>
        <div class="container">
            <div class="row v-align-children">
                <div class="col-sm-8 mb-xs-80">
                    <h2 class="mb16">Discussing future trends in
                        <br class="hidden-sm"> e-commerce and digital design</h2>
                    <h6 class="uppercase mb32">2nd August Melbourne, Victoria</h6>
                    <a class="btn btn-filled btn-lg mb0" href="#">Purchase A Ticket</a>
                </div>
                <div class="col-sm-4 text-center text-left-xs">
                     <div class="modal-container">
                        <div class="play-button btn-modal large inline"></div>
                        <div class="foundry_modal no-bg">
                            <iframe data-provider="vimeo" data-video-id="25737856" data-autoplay="1"></iframe>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-slider-9" class="vim" vbp="header,fullscreen,form" vbr="Product Image" icons="mailchimp-cmonitor">
    <section class="bg-primary pb0">
        <div class="container pt80">
            <div class="row mb24 mb-xs-0">
                <div class="col-sm-10 col-sm-offset-1 text-center">
                    <h1 class="large">Present your app, easily.</h1>
                    <p class="lead">
                        The perfect layout for presenting landing pages for apps
                        <br> or software in contemporary style.
                    </p>
                </div>
            </div>
            
            <div class="row mb80 mb-xs-24">
                <div class="col-sm-6 col-sm-offset-3">
                    <form class="form-newsletter halves" data-success="Thanks for your registration, we will be in touch shortly." data-error="Please fill all fields correctly.">
                        <input type="text" name="email" class="transparent validate-email validate-required signup-email-field" placeholder="Email Address">
                        <button type="submit" class="btn-white">Start Free</button>
                        <iframe srcdoc="<!-- Begin MailChimp Signup Form --><link href=&quot;https://cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;><style type=&quot;text/css&quot;>    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */</style><div id=&quot;mc_embed_signup&quot;><form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=94d040322a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>    <div id=&quot;mc_embed_signup_scroll&quot;>    <h2>Subscribe to our mailing list</h2><div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span></label>    <input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-FNAME&quot;>First Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-LNAME&quot;>Last Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;></div>    <div id=&quot;mce-responses&quot; class=&quot;clear&quot;>        <div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div>        <div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div>    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->    <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_94d040322a&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>    <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>    </div></form></div><script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><!--End mc_embed_signup-->" class="mail-list-form">
                        </iframe>
                    </form>
                </div>
            </div>
            
            <div class="row">
                <img alt="image" src="../img/app1.png">
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-slider-10" class="vim" vbp="header,fullscreen" vbr="Bottom Button">
    <section class="cover fullscreen image-bg overlay parallax">
        <div class="background-image-holder">
            <img alt="image" class="background-image" src="../img/prop1.jpg">
        </div>
        <div class="container v-align-transform">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h1 class="large uppercase mb16">53 Hopetoun Rd.</h1>
                    <h5 class="uppercase mb0">Contemporary Living In The Heart Of Toorak</h5>
                </div>
            </div>
            
        </div>
        
        <div class="align-bottom relative-xs text-center">
            <a class="btn btn-filled btn-lg mb32 mt-xs-40" href="#">Register Interest</a>
        </div>
    </section>
</section>

<section id="variant-slider-13" class="vim" vbp="slider" vbr="Ken Burns Slider">
    <section class="cover fullscreen image-slider slider-arrow-controls kenburns">
        <ul class="slides">                  
            <li class="image-bg pt-xs-240 pb-xs-240">
                <div class="background-image-holder">
                    <img alt="image" class="background-image" src="../img/burns2.jpg">
                </div>
                <div class="align-bottom">
                    <div class="row">
                        <div class="col-sm-12">
                            <hr class="mb24">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 col-sm-6 col-xs-12 text-center-xs mb-xs-24">
                            <h4 class="uppercase mb0 bold">Ben Kurns</h4>
                            <span>Landscape Photographer</span>
                        </div>
                        <div class="col-md-4 hidden-sm hidden-xs">
                            <p style="height: 0px">
                                        To photograph is to hold one's breath, when all faculties converge to capture fleeting reality. It's at that precise moment that mastering an image becomes a great physical and intellectual joy.  
                            </p>
                        </div>
                        <div class="col-md-5 col-sm-6 col-xs-12 text-right text-center-xs">
                            <a class="btn btn btn-white mt16" href="#">Contact Me</a>
                        </div>
                    </div>
                    
                </div>
                
            </li>
        </ul>
    </section>
</section>


<section id="variant-slider-14" class="vim" vbp="slider" vbr="Product Carousel w/ text">
	<section>
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-push-3 text-center">
					<div class="image-slider slider-paging-controls controls-outside">
						<ul class="slides">
							<li class="mb32">
								<img alt="App" src="../img/app5.png">
							</li>
							<li class="mb32">
								<img alt="App" src="../img/app5.png">
							</li>
							<li class="mb32">
								<img alt="App" src="../img/app5.png">
							</li>
						</ul>
					</div>
				</div>
				
				<div class="col-md-3 col-md-pull-6">
					<div class="mt80 mt-xs-80 text-right text-left-xs">
						<h5 class="uppercase bold mb16">Never forget again</h5>
						<p class="fade-1-4">
							The reminder that just keeps reminding! Scramble to your watch to silence these intrusive notifications.
						</p>
					</div>
					
					<div class="mt80 mt-xs-0 text-right text-left-xs">
						<h5 class="uppercase bold mb16">Stay active, be healthy</h5>
						<p class="fade-1-4">
							No more personal responsibility! You'll now be constantly reminded to stand up and move around.
						</p>
					</div>
				</div>
				
				<div class="col-md-3">
					<div class="mt80 mt-xs-0">
						<h5 class="uppercase bold mb16">Powered by you</h5>
						<p class="fade-1-4">
							Forget empty branding promises, this thing is powered by awesome (you), and we stand by that.
						</p>
					</div>
					
					<div class="mt80 mt-xs-0">
						<h5 class="uppercase bold mb16">Leave your phone</h5>
						<p class="fade-1-4">
							And you wont be able to use the app! Make sure you have the phone within close proximity at all times!
						</p>
					</div>
				</div>
			</div>
			
		</div>
		
	</section>
</section>

<section id="variant-slider-15" class="vim" vbp="slider,video" vbr="HTML5 Video Slider" icons="new">
    <section class="cover fullscreen image-slider slider-all-controls">
        <ul class="slides">
            <li class="vid-bg image-bg overlay">
                <div class="background-image-holder">
                    <img alt="Background Image" class="background-image" src="https://unsplash.imgix.net/photo-1425321395722-b1dd54a97cf3?q=75&fm=jpg&w=1080&fit=max&s=9e4ce3e023621d6f94259eea8fa3b856">
                </div>
                <div class="fs-vid-background">
                    <video muted loop>
                        <source src="../video/video.webm" type="video/webm">
                        </source><source src="../video/video.mp4" type="video/mp4">
                        </source><source src="../video/video.ogv" type="video/ogg">
                    </source></video>
                </div>
                <div class="container v-align-transform">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <h1 class="large">Flexslider + Video Backgrounds</h1>
                            <p class="lead">
                                Simple markup with intellegent auto play and pause functionality.
                            </p>
                        </div>
                    </div>
                    
                </div>
                
            </li>
            <li class="image-bg overlay">
                <div class="background-image-holder">
                    <img alt="Background Image" class="background-image" src="../img/home5.jpg">
                </div>
                <div class="container v-align-transform">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <h1 class="large">Flexslider + Video Backgrounds</h1>
                            <p class="lead">
                                Simple markup with intellegent auto play and pause functionality.
                            </p>
                        </div>
                    </div>
                    
                </div>
                
            </li>
            <li class="vid-bg image-bg overlay">
                <div class="background-image-holder">
                    <img alt="Background Image" class="background-image" src="https://unsplash.imgix.net/photo-1425321395722-b1dd54a97cf3?q=75&fm=jpg&w=1080&fit=max&s=9e4ce3e023621d6f94259eea8fa3b856">
                </div>
                <div class="fs-vid-background">
                    <video muted loop>
                        <source src="../video/video2.webm" type="video/webm">
                        </source><source src="../video/video2.mp4" type="video/mp4">
                        </source><source src="../video/video2.ogv" type="video/ogg">
                    </source></video>
                </div>
                <div class="container v-align-transform">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <h1 class="large">Flexslider + Video Backgrounds</h1>
                            <p class="lead">
                                Simple markup with intellegent auto play and pause functionality.
                            </p>
                        </div>
                    </div>
                    
                </div>
                
            </li>
            <li class="image-bg overlay">
                <div class="background-image-holder">
                    <img alt="Background Image" class="background-image" src="../img/home4.jpg">
                </div>
                <div class="container v-align-transform">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <h1 class="large">Flexslider + Video Backgrounds</h1>
                            <p class="lead">
                                Simple markup with intellegent auto play and pause functionality.
                            </p>
                        </div>
                    </div>
                    
                </div>
                
            </li>
        </ul>
    </section>  
</section>

<section id="variant-banner-1" class="vim" vbp="header" vbr="w/ App Store Link">
	<section class="image-bg parallax pt240 pb180 pt-xs-80 pb-xs-80">
		<div class="background-image-holder">
			<img alt="image" class="background-image" src="../img/app8.jpg">
		</div>
		
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-sm-12">
					<h1>Built by designers,<br> tailored to you.</h1>
					<p class="lead mb48 mb-xs-32">
						A simple, stylish way to showcase your product,<br> built with Foundry & Variant Page Builder
					</p>
					<a href="#">
						<img class="image-xs" alt="App Store" src="../img/appstore.png">
					</a>
				</div>
			</div>
			
		</div>
		
	</section>
</section>

<section id="variant-banner-2" class="vim" vbp="header" vbr="Personal">
	<section class="image-bg overlay pt240 pb240 pt-xs-180 pb-xs-180">
		<div class="background-image-holder">
			<img alt="image" class="background-image" src="../img/fitness3.jpg">
		</div>
		<div class="container">
			<div class="row">
				<div class="col-sm-6">
					<h1 class="mb0 uppercase bold italic">Ben Dobson</h1>
					<h5 class="uppercase mb32">Personal Training & Dietary Advice</h5>
					<p class="lead mb0">
						&ldquo;Everyone deserves good health and happiness.<br class="hidden-sm">My goal is to help people achieve both.&rdquo;
					</p>
				</div>
			</div>
			
		</div>
		
	</section>
</section>

<section id="variant-title-1" class="vim" vbp="Page Title" vbr="Left Aligned">
    <section class="page-title page-title-4 bg-secondary toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h3 class="uppercase mb0">Short Title</h3>
                </div>
                <div class="col-md-6 text-right">
                    <ol class="breadcrumb breadcrumb-2">
                        <li>
                            <a vht="parent" href="#">Home</a>
                        </li>
                        <li>
                            <a vht="parent" href="#">Elements</a>
                        </li>
                        <li class="active">Page Titles</li>
                    </ol>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-title-2" class="vim" vbp="Page Title" vbr="Left Aligned Image">
    <section class="page-title page-title-4 image-bg overlay parallax">
        <div class="background-image-holder">
            <img alt="Background Image" class="background-image" src="../img/cover14.jpg">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h3 class="uppercase mb0">Short Image</h3>
                </div>
                <div class="col-md-6 text-right">
                    <ol class="breadcrumb breadcrumb-2">
                        <li>
                            <a vht="parent" href="#">Home</a>
                        </li>
                        <li>
                            <a vht="parent" href="#">Elements</a>
                        </li>
                        <li class="active">Page Titles</li>
                    </ol>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-title-3" class="vim" vbp="Page Title" vbr="Left Aligned Large">
    <section class="page-title page-title-2 bg-secondary toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2 class="uppercase mb8">Large Left</h2>
                    <p class="lead mb0">A descriptive subtitle for your page.</p>
                </div>
                <div class="col-md-6 text-right">
                    <ol class="breadcrumb breadcrumb-2">
                        <li>
                            <a vht="parent" href="#">Home</a>
                        </li>
                        <li>
                            <a vht="parent" href="#">Elements</a>
                        </li>
                        <li class="active">Page Titles</li>
                    </ol>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-title-4" class="vim" vbp="Page Title" vbr="Left Aligned Large Image">
    <section class="page-title page-title-2 image-bg overlay parallax">
        <div class="background-image-holder">
            <img alt="Background Image" class="background-image" src="../img/cover15.jpg">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2 class="uppercase mb8">Large Image</h2>
                    <p class="lead mb0">A descriptive subtitle for your page.</p>
                </div>
                <div class="col-md-6 text-right">
                    <ol class="breadcrumb breadcrumb-2">
                        <li>
                            <a vht="parent" href="#">Home</a>
                        </li>
                        <li>
                            <a vht="parent" href="#">Elements</a>
                        </li>
                        <li class="active">Page Titles</li>
                    </ol>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-title-5" class="vim" vbp="Page Title" vbr="Center Aligned">
    <section class="page-title page-title-3 bg-secondary toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h3 class="uppercase mb0">Small Center</h3>
                </div>
            </div>
            
        </div>
        
        <ol class="breadcrumb breadcrumb-2">
            <li>
                <a vht="parent" href="#">Home</a>
            </li>
            <li>
                <a vht="parent" href="#">Elements</a>
            </li>
            <li class="active">Page Titles</li>
        </ol>
    </section>
</section>

<section id="variant-title-6" class="vim" vbp="Page Title" vbr="Center Aligned Image">
    <section class="page-title page-title-3 image-bg overlay parallax">
        <div class="background-image-holder">
            <img alt="Background Image" class="background-image" src="../img/cover15.jpg">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h3 class="uppercase mb0">Small Image</h3>
                </div>
            </div>
            
        </div>
        
        <ol class="breadcrumb breadcrumb-2">
            <li>
                <a vht="parent" href="#">Home</a>
            </li>
            <li>
                <a vht="parent" href="#">Elements</a>
            </li>
            <li class="active">Page Titles</li>
        </ol>
    </section>
</section>

<section id="variant-title-7" class="vim" vbp="Page Title" vbr="Center Aligned Large">
    <section class="page-title page-title-1 bg-secondary toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h2 class="uppercase mb0">Large Title</h2>
                </div>
            </div>
            
        </div>
        
        <ol class="breadcrumb breadcrumb-2">
            <li>
                <a vht="parent" href="#">Home</a>
            </li>
            <li>
                <a vht="parent" href="#">Elements</a>
            </li>
            <li class="active">Page Titles</li>
        </ol>
    </section>
</section>

<section id="variant-title-8" class="vim" vbp="Page Title" vbr="Center Aligned Large Image">
    <section class="page-title page-title-1 image-bg overlay parallax">
        <div class="background-image-holder">
            <img alt="Background Image" class="background-image" src="../img/cover14.jpg">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h2 class="uppercase mb0">Large Title</h2>
                </div>
            </div>
            
        </div>
        
        <ol class="breadcrumb breadcrumb-2">
            <li>
                <a vht="parent" href="#">Home</a>
            </li>
            <li>
                <a vht="parent" href="#">Elements</a>
            </li>
            <li class="active">Page Titles</li>
        </ol>
    </section>
</section>

<section id="variant-textimage-1" class="vim" vbp="Text + Image" vbr="Image Edge Left">
    <section class="image-edge toggle-bg-mrv">
        <div class="col-md-6 col-sm-4 p0">
            <img alt="Screenshot" class="mb-xs-24" src="../img/phone1.png">
        </div>
        <div class="container">
            <div class="col-md-5 col-md-offset-1 col-sm-7 col-sm-offset-1 v-align-transform right">
                <h1 class="large mb40 mb-xs-16">Clean, Usable Image Blocks.</h1>
                <h6 class="uppercase mb16">Left & Right Variations Included</h6>
                <p class="lead mb40">
                    We've built three distinct image and text combinations for you to showcase the features of your product or service. All combos come in left and right arrangements.
                </p>
                <a class="btn-lg btn" href="#">Explore Foundry</a>
            </div>
        </div>
        
    </section>
</section>

<section id="variant-textimage-2" class="vim" vbp="Text + Image" vbr="Image Edge Right">
    <section class="image-edge">
        <div class="col-md-6 col-sm-4 p0 col-md-push-6 col-sm-push-8">
            <img alt="Screenshot" class="mb-xs-24" src="../img/phone2.png">
        </div>
        <div class="container">
            <div class="col-md-5 col-md-pull-0 col-sm-7 col-sm-pull-4 v-align-transform">
                <h1 class="large mb40 mb-xs-16">Sleek, Smart and Modern.</h1>
                <h6 class="uppercase mb16">A timeless design to be proud of</h6>
                <p class="lead mb40">
                    We've built three distinct image and text combinations for you to showcase the features of your product or service. All combos come in left and right arrangements.
                </p>
                <a class="btn-lg btn" href="#">Explore Foundry</a>
            </div>
        </div>
        
    </section>
</section>

<section id="variant-textimage-3" class="vim" vbp="Text + Image" vbr="Image Inline Left">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row v-align-children">
                <div class="col-md-7 col-sm-6 text-center mb-xs-24">
                    <img class="cast-shadow" alt="Screenshot" src="../img/screenshot.jpg">
                </div>
                <div class="col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-1">
                    <h3>Build a slick, modern site faster than ever</h3>
                    <p>
                        Foundry is your complete design toolkit, built from the ground up to be flexible, extensible and stylish. Building slick, contemporary sites has never been this easy!
                    </p>
                    <a class="btn-filled btn" href="#">Explore Foundry</a>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-textimage-4" class="vim" vbp="Text + Image" vbr="Image Inline Right">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row v-align-children">
                <div class="col-md-4 col-sm-5 mb-xs-24">
                    <h3>Inline images & text, vertically centered for visual balance.</h3>
                    <p>
                        Give images an enhanced sense of place in your pages by adding the '.cast-shadow' class. This gives images a subtle shadow and gives the illusion of depth.
                    </p>
                </div>
                <div class="col-md-7 col-md-offset-1 col-sm-6 col-sm-offset-1 text-center">
                    <img class="cast-shadow" alt="Screenshot" src="../img/screenshot2.jpg">
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-textimage-5" class="vim" vbp="Text + Image" vbr="Image Block Left">
    <section class="image-square left toggle-bg-mrv">
        <div class="col-md-6 image">
            <div class="background-image-holder">
                <img alt="image" class="background-image" src="../img/small1.jpg">
            </div>
        </div>
        <div class="col-md-6 col-md-offset-1 content">
            <h3>Build a slick, modern site faster than ever before.</h3>
            <p class="mb0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
            </p>
        </div>
    </section>
</section>

<section id="variant-textimage-6" class="vim" vbp="Text + Image" vbr="Image Block Right">
    <section class="image-square right toggle-bg-mrv">
        <div class="col-md-6 image">
            <div class="background-image-holder">
                <img alt="image" class="background-image" src="../img/small2.jpg">
            </div>
        </div>
        <div class="col-md-6 content">
            <h3>Build a slick, modern site faster than ever before.</h3>
            <p class="mb0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
            </p>
        </div>
    </section>
</section>

<section id="variant-textimage-7" class="vim" vbp="Text + Image" vbr="Offset Image w/ Text">
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-1">
                    <div class="feature bordered">
                        <h1 class="large uppercase mb64 mb-xs-24">bon goût</h1>
                        <p class="mb80 mb-xs-24">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </p>
                        <a class="btn btn-lg btn-filled inner-link" href="#book-table">Book A Table</a>
                    </div>
                </div>
                <div class="col-sm-5">
                    <img class="mt80 mt-xs-0 mb24" alt="Pic" src="../img/resto5.jpg">
                    <img class="col-md-pull-4 relative" alt="Pic" src="../img/resto6.jpg">
                </div>
            </div>
            
        </div>
        
    </section>
</section>


<section id="variant-textimage-8" class="vim" vbp="Text + Image" vbr="Product shot w/ features">
	<section>
		<div class="container">
			<div class="row v-align-children">
				<div class="col-sm-4 col-md-offset-1 mb-xs-24">
					<h2 class="mb64 mb-xs-32">Meet Foundry, your new best friend.</h2>
					<div class="mb40 mb-xs-24">
						<h5 class="uppercase bold mb16">Screenshots for days</h5>
						<p class="fade-1-4">
							Utilize the near infinite number of Apple Watch mockups to showcase your app in clear context. Thank god for Dribbble, huh?
						</p>
					</div>
					<div class="mb40 mb-xs-24">
						<h5 class="uppercase bold mb16">Call off the search</h5>
						<p class="fade-1-4">
							This is it, that perfect template you've been looking for. It's well built and sharp looking, goodbye competition!
						</p>
					</div>
				</div>
				<div class="col-sm-5 col-sm-6 col-sm-offset-1 text-center">
					<img alt="Screenshot" src="../img/app7.png">
				</div>
			</div>
			
		</div>
		
	</section>
</section>

<section id="variant-textimage-9" class="vim" vbp="Text + Image" vbr="Paragraph over Image">
	<section class="image-bg overlay parallax pt180 pb180 pt-xs-80 pb-xs-80">
		<div class="background-image-holder">
			<img alt="image" class="background-image" src="../img/app9.jpg">
		</div>
		
		<div class="container">
			<div class="row">
				<div class="col-md-5 col-sm-6 col-md-push-7 col-sm-push-6">
					<h2>Share meaningful moments with loved ones</h2>
					<p class="lead mb48 mb-xs-32">
						Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam.
					</p>
				</div>
			</div>
			
		</div>
		
	</section>
</section>

<section id="variant-icons-1" class="vim" vbp="Icons" vbr="Centered Columns">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row mb64 mb-xs-24">
                <div class="col-sm-12 col-md-10 col-md-offset-1 text-center">
                    <h3>Foundry gives you the flexibility to build your site using purpose-made content blocks.</h3>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-6 text-center">
                    <div class="feature">
                        <div class="text-center">
                            <i class="ti-layout-grid2 icon-lg mb40 mb-xs-24 inline-block color-primary"></i>
                            <h5 class="uppercase">Expert, Modular Design</h5>
                        </div>
                        <p>
                            Customers love our block-based approach to template building,
                            <br class="hidden-sm">it makes assembling beautiful pages fast and enjoyable, leaving
                            <br class="hidden-sm"> more time to craft your perfect layout.
                        </p>
                    </div>
                    
                </div>
                <div class="col-sm-6 text-center">
                    <div class="feature">
                        <div class="text-center">
                            <i class="ti-heart icon-lg mb40 mb-xs-24 inline-block color-primary"></i>
                            <h5 class="uppercase">Flexibility for Developers</h5>
                        </div>
                        <p>
                            We haven't forgotten developers, that's why we've built Foundry
                            <br class="hidden-sm"> from the ground-up as a powerful, easy to understand framework
                            <br class="hidden-sm"> with a particular focus on code readability.
                        </p>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-icons-2" class="vim" vbp="Icons" vbr="Left Aligned Columns">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row mb64 mb-xs-24">
                <div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
                    <h3>Our Expertise</h3>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-5 col-md-offset-1 col-sm-6 mb40 mb-xs-24">
                    <i class="ti-layers icon inline-block mb16 fade-3-4"></i>
                    <h4>Modular Design</h4>
                    <p>
                        With a plethora of purpose-built content blocks, colors and fonts, Foundry presents a mind-boggling number of combinations. Test drive the builder now!
                    </p>
                </div>
                <div class="col-md-5 col-sm-6 mb40 mb-xs-24">
                    <i class="ti-gallery icon inline-block mb16 fade-3-4"></i>
                    <h4>Silky Parallax</h4>
                    <p>
                        We've built a buttery smooth parallax scrolling experience with a heavy focus on performance. Extensively tested across a range of browser and mouse types.
                    </p>
                </div>
                <div class="col-md-5 col-md-offset-1 col-sm-6 mb40 mb-xs-24">
                    <i class="ti-package icon inline-block mb16 fade-3-4"></i>
                    <h4>Unique Concepts</h4>
                    <p>
                        10 Fresh and unique concepts included out of the box. From portfolio to property showcase, Foundry's adaptable look is perfect for your next project.
                    </p>
                </div>
                <div class="col-md-5 col-sm-6 mb40 mb-xs-24">
                    <i class="ti-infinite icon inline-block mb16 fade-3-4"></i>
                    <h4>Infinite Possibility</h4>
                    <p>
                        With over 100 pre-made HTML templates included, it's easier than ever to find a look that suits you. If not, just create your own with Variant Page Builder!
                    </p>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-icons-3" class="vim" vbp="Icons" vbr="Circular Icons">
    <section class="pb64 pb-xs-40 toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="feature feature-2 filled text-center">
                        <div class="text-center" vht=".col-sm-4">
                            <i class="ti-layers icon-sm"></i>
                            <h5 class="uppercase">Modular Design</h5>
                        </div>
                        <p>
                            With a plethora of purpose-built content blocks, colors and fonts, Foundry presents a mind-boggling number of combinations. Test drive the builder now!
                        </p>
                    </div>
                    
                </div>
                <div class="col-sm-4">
                    <div class="feature feature-2 filled text-center">
                        <div class="text-center" vht=".col-sm-4">
                            <i class="ti-gallery icon-sm"></i>
                            <h5 class="uppercase">Silky Parallax</h5>
                        </div>
                        <p>
                            We've built a buttery smooth parallax scrolling experience with a heavy focus on performance. Extensively tested across a range of browser and mouse types.
                        </p>
                    </div>
                    
                </div>
                <div class="col-sm-4">
                    <div class="feature feature-2 filled text-center">
                        <div class="text-center" vht=".col-sm-4">
                            <i class="ti-package icon-sm"></i>
                            <h5 class="uppercase">Unique Concepts</h5>
                        </div>
                        <p>
                            10 Fresh and unique concepts included out of the box. From portfolio to property showcase, Foundry's adaptable look is perfect for your next project.
                        </p>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-icons-4" class="vim" vbp="Icons" vbr="Centered Light Icons">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-4 text-center">
                    <div class="feature" vht="parent">
                        <i class="ti-gallery icon fade-3-4 inline-block mb16"></i>
                        <h4>Silky Parallax</h4>
                        <p>
                            We've built a buttery smooth parallax scrolling experience with a heavy focus on performance. Extensively tested across a range of browser and mouse types.
                        </p>
                    </div>
                </div>
                <div class="col-sm-4 text-center">
                    <div class="feature" vht="parent">
                        <i class="ti-package icon fade-3-4 inline-block mb16"></i>
                        <h4>Unique Concepts</h4>
                        <p>
                            10 Fresh and unique concepts included out of the box. From portfolio to property showcase, Foundry's adaptable look is perfect for your next project.
                        </p>
                    </div>
                </div>
                <div class="col-sm-4 text-center">
                    <div class="feature" vht="parent">
                        <i class="ti-layers icon fade-3-4 inline-block mb16"></i>
                        <h4>Modular Design</h4>
                        <p>
                            With a plethora of purpose-built content blocks, colors and fonts, Foundry presents a mind-boggling number of combinations. Test drive the builder now!
                        </p>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-icons-5" class="vim" vbp="Icons" vbr="Icons On Image">
    <section class="image-bg overlay parallax">
        <div class="background-image-holder">
            <img alt="Background" class="background-image" src="../img/cover1.jpg">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h2 class="mb16">There's so much to love</h2>
                    <p class="lead mb64">
                        A remarkably versatile template packed with features.
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-4">
                    <div class="feature feature-1 boxed">
                        <div class="text-center" vht=".col-sm-4">
                            <i class="ti-package icon"></i>
                            <h5 class="uppercase">Unique Concepts</h5>
                        </div>
                        <p>
                            10 Fresh and unique concepts included out of the box. From portfolio to property showcase, Foundry's adaptable look is perfect for your next project.
                        </p>
                    </div>
                    
                </div>
                <div class="col-sm-4">
                    <div class="feature feature-1 boxed">
                        <div class="text-center" vht=".col-sm-4">
                            <i class="ti-infinite icon"></i>
                            <h5 class="uppercase">Infinite Potential</h5>
                        </div>
                        <p>
                            With over 100 pre-made HTML templates included, it's easier than ever to find a look that suits you. If not, just create your own with Variant Page Builder!
                        </p>
                    </div>
                    
                </div>
                <div class="col-sm-4">
                    <div class="feature feature-1 boxed">
                        <div class="text-center" vht=".col-sm-4">
                            <i class="ti-heart icon"></i>
                            <h5 class="uppercase">Developer Friendly</h5>
                        </div>
                        <p>
                            We haven't forgotten developers, that's why we've built Foundry from the ground-up as a powerful, easy to understand framework, with a focus on code readability.
                        </p>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-icons-6" class="vim" vbp="Icons" vbr="Icons with List">
    <section class="bg-dark toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h6 class="uppercase">Section Title</h6>
                    <hr class="mb160 mb-xs-24">
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-10">
                    <h1 class="thin">Focussed, Diverse, Disruptive.</h1>
                </div>
            </div>
            
            <div class="row mb160 mb-xs-0">
                <div class="col-md-6 col-sm-8">
                    <p class="lead">
                        Foundry maintains a portfolio spanning multiple sectors. Disruptive technology is our unifying theme.
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-3 col-sm-6 mb-xs-24">
                    <i class="ti-pulse icon mb32"></i>
                    <h6 class="uppercase">Health Monitoring</h6>
                    <ul>
                        <li>Medibank Private</li>
                        <li>Fit Bit</li>
                        <li>GoPro LTD.</li>
                        <li>Adventours</li>
                        <li>Airbnb</li>
                        <li>Chemist Warehouse</li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-6 mb-xs-24">
                    <i class="ti-map-alt icon mb32"></i>
                    <h6 class="uppercase">Location Services</h6>
                    <ul>
                        <li>Find My iPhone</li>
                        <li>FourSquare</li>
                        <li>Periscope</li>
                        <li>Crackle</li>
                        <li>Urban Spoon</li>
                        <li>Yelp</li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-6 mb-xs-24">
                    <i class="ti-mobile icon mb32"></i>
                    <h6 class="uppercase">Social Data</h6>
                    <ul>
                        <li>Life Invader</li>
                        <li>Twitter</li>
                        <li>Google AdWords</li>
                        <li>Track My Day</li>
                        <li>SocialScape</li>
                        <li>Tinder</li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-6 mb-xs-24">
                    <i class="ti-harddrives icon mb32"></i>
                    <h6 class="uppercase">Cloud Enterprise</h6>
                    <ul>
                        <li>Box</li>
                        <li>Sunny Cloudy</li>
                        <li>Cumulii</li>
                        <li>Precipitatr</li>
                        <li>Nimb.us</li>
                    </ul>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-icons-7" class="vim" vbp="Icons" vbr="Icons in Restricted Columns">
    <section class="bg-dark pt120 pb120 pt-xs-40 pb-xs-40 toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-4 col-md-offset-2">
                    <div class="feature feature-3 mb64 mb-xs-24">
                        <div class="left">
                            <i class="ti-signal icon-sm"></i>
                        </div>
                        <div class="right">
                            <h4 class="mb16">Stay Organized</h4>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.
                            </p>
                        </div>
                    </div>
                    
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="feature feature-3 mb64 mb-xs-24">
                        <div class="left">
                            <i class="ti-ruler-alt icon-sm"></i>
                        </div>
                        <div class="right">
                            <h4 class="mb16">Get Creative</h4>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.
                            </p>
                        </div>
                    </div>
                    
                </div>
                <div class="col-sm-6 col-md-4 col-md-offset-2">
                    <div class="feature feature-3 mb-xs-24">
                        <div class="left">
                            <i class="ti-layers icon-sm"></i>
                        </div>
                        <div class="right">
                            <h4 class="mb16">Silky Parallax</h4>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.
                            </p>
                        </div>
                    </div>
                    
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="feature feature-3">
                        <div class="left">
                            <i class="ti-heart icon-sm"></i>
                        </div>
                        <div class="right">
                            <h4 class="mb16">Elite Author Item</h4>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.
                            </p>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-icons-8" class="vim" vbp="Icons" vbr="Left Aligned Icons">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="feature feature-3 mb-xs-24 mb64" vht="parent">
                        <div class="left">
                            <i class="ti-panel icon-sm"></i>
                        </div>
                        <div class="right">
                            <h5 class="uppercase mb16">Expert, Modular Design</h5>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
                            </p>
                        </div>
                    </div>
                    
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="feature feature-3 mb-xs-24 mb64" vht="parent">
                        <div class="left">
                            <i class="ti-medall icon-sm"></i>
                        </div>
                        <div class="right">
                            <h5 class="uppercase mb16">Trusted, Elite Author</h5>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
                            </p>
                        </div>
                    </div>
                    
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="feature feature-3 mb-xs-24 mb64" vht="parent">
                        <div class="left">
                            <i class="ti-layout icon-sm"></i>
                        </div>
                        <div class="right">
                            <h5 class="uppercase mb16">Ultimate Flexibility</h5>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
                            </p>
                        </div>
                    </div>
                    
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="feature feature-3 mb-xs-24 mb64" vht="parent">
                        <div class="left">
                            <i class="ti-comment-alt icon-sm"></i>
                        </div>
                        <div class="right">
                            <h5 class="uppercase mb16">Dedicated Support</h5>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
                            </p>
                        </div>
                    </div>
                    
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="feature feature-3 mb-xs-24" vht="parent">
                        <div class="left">
                            <i class="ti-infinite icon-sm"></i>
                        </div>
                        <div class="right">
                            <h5 class="uppercase mb16">Endless Layouts</h5>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
                            </p>
                        </div>
                    </div>
                    
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="feature feature-3 mb-xs-24" vht="parent">
                        <div class="left">
                            <i class="ti-dashboard icon-sm"></i>
                        </div>
                        <div class="right">
                            <h5 class="uppercase mb16">Built for Performance</h5>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
                            </p>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-icons-9" class="vim" vbp="Icons" vbr="Icons Boxed">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="feature feature-1 boxed" vht="parent">
                        <div class="text-center">
                            <i class="ti-pulse icon"></i>
                            <h4>Elegant and usable templates,
                                <br class="hidden-sm"> crafted with purpose.</h4>
                        </div>
                        <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.
                        </p>
                    </div>
                    
                </div>
                <div class="col-sm-6">
                    <div class="feature feature-1 boxed" vht="parent">
                        <div class="text-center">
                            <i class="ti-dashboard icon"></i>
                            <h4>Built from the ground up
                                <br class="hidden-sm"> for speed and performance.</h4>
                        </div>
                        <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.
                        </p>
                    </div>
                    
                </div>
                <div class="col-sm-6">
                    <div class="feature feature-1 boxed" vht="parent">
                        <div class="text-center">
                            <i class="ti-layers icon"></i>
                            <h4>A design system that includes
                                <br class="hidden-sm"> a massive array of elements.</h4>
                        </div>
                        <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.
                        </p>
                    </div>
                    
                </div>
                <div class="col-sm-6">
                    <div class="feature feature-1 boxed" vht="parent">
                        <div class="text-center">
                            <i class="ti-package icon"></i>
                            <h4>An all-inclusive package
                                <br class="hidden-sm"> complete with intuitive page builder.</h4>
                        </div>
                        <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.
                        </p>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-icons-10" class="vim" vbp="Icons" vbr="Icon Seperator">
    <section class="bg-secondary toggle-bg-mrv">
        <div class="container">
            <div class="row mb40 mb-xs-0">
                <div class="col-sm-12 text-center">
                    <h4 class="uppercase">A Design To Be Proud Of</h4>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-6 col-md-5 text-right text-center-xs">
                    <h1 class="large mb8">10,000+</h1>
                    <h6 class="uppercase">Customers using our templates</h6>
                </div>
                <div class="col-md-2 text-center hidden-sm hidden-xs">
                    <i class="ti-infinite icon icon-lg color-primary mt8 mt-xs-0"></i>
                </div>
                <div class="col-sm-6 col-md-5 text-center-xs">
                    <h1 class="large mb8">Limitless</h1>
                    <h6 class="uppercase">Layout potential using Foundry</h6>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-tabs-1" class="vim" vbp="Tabs" vbr="Button Tabs">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                    <h4 class="uppercase mb80">Button Tabs</h4>
                    <div class="tabbed-content button-tabs">
                        <ul class="tabs">
                            <li class="active">
                                <div class="tab-title" vht="li">
                                    <span vht="li">History</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="li">
                                    <span vht="li">Approach</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="li">
                                    <span vht="li">Culture</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est.
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title">
                                    <span vht="li">Method</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-tabs-3" class="vim" vbp="Tabs" vbr="Text Tabs">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                    <h4 class="uppercase mb80">Text Tabs</h4>
                    <div class="tabbed-content text-tabs">
                        <ul class="tabs">
                            <li class="active">
                                <div class="tab-title" vht="parent">
                                    <span vht="li">History</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="parent">
                                    <span vht="li">Approach</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="parent">
                                    <span vht="li">Culture</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est.
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="parent">
                                    <span vht="li">Method</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-tabs-2" class="vim" vbp="Tabs" vbr="Icon Tabs">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                    <h4 class="uppercase mb80">Icon Tabs</h4>
                    <div class="tabbed-content icon-tabs">
                        <ul class="tabs">
                            <li class="active">
                                <div class="tab-title" vht="parent">
                                    <i class="ti-layers icon" vht="li"></i>
                                    <span vht="li">History</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="parent">
                                    <i class="ti-package icon" vht="li"></i>
                                    <span vht="li">Approach</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="parent">
                                    <i class="ti-stats-up icon" vht="li"></i>
                                    <span vht="li">Culture</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est.
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="parent">
                                    <i class="ti-layout-media-center-alt icon" vht="li"></i>
                                    <span vht="li">Method</span>
                                </div>
                                <div class="tab-content">
                                    <p>
                                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-tabs-4" class="vim" vbp="Tabs" vbr="Vertical Button Tabs">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h4 class="uppercase mb80">Vertical Buttons</h4>
                    <div class="tabbed-content button-tabs vertical">
                        <ul class="tabs">
                            <li class="active">
                                <div class="tab-title" vht="li">
                                    <span vht="li">History</span>
                                </div>
                                <div class="tab-content">
                                    <h5 class="uppercase">Let's Talk Tabs</h5>
                                    <hr>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
                                    </p>
                                    <p>
                                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="li">
                                    <span vht="li">Approach</span>
                                </div>
                                <div class="tab-content">
                                    <h5 class="uppercase">Cool Tabs</h5>
                                    <hr>
                                    <p>
                                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
                                    </p>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="li">
                                    <span vht="li">Culture</span>
                                </div>
                                <div class="tab-content">
                                    <h5 class="uppercase">Shorter Tabs</h5>
                                    <hr>
                                    <p>
                                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est.
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="tab-title" vht="li">
                                    <span vht="li">Method</span>
                                </div>
                                <div class="tab-content">
                                    <h5 class="uppercase">Longer Tabs</h5>
                                    <hr>
                                    <p>
                                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
                                    </p>
                                    <p>
                                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est.
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-pricing-1" class="vim" vbp="Pricing" vbr="Pricing Brief">
     <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h4 class="uppercase mb16">Brief Plans</h4>
                    <p class="lead mb64">
                        Perfect for uncomplicated pricing options. Alter appearance with '.boxed' and '.emphasis' classes
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="pricing-table pt-1 text-center" vht="parent">
                        <h5 class="uppercase">Starter</h5>
                        <span class="price">$12</span>
                        <p class="lead">Per Month</p>
                        <a class="btn btn-filled btn-lg" href="#">Get Started</a>
                        <p>
                            30 Day Free Trial
                            <br> No Credit Card Required
                        </p>
                    </div>
                    
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="pricing-table pt-1 text-center boxed" vht="parent">
                        <h5 class="uppercase">Starter</h5>
                        <span class="price">$12</span>
                        <p class="lead">Per Month</p>
                        <a class="btn btn-filled btn-lg" href="#">Get Started</a>
                        <p>
                            30 Day Free Trial
                            <br> No Credit Card Required
                        </p>
                    </div>
                    
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="pricing-table pt-1 text-center emphasis" vht="parent">
                        <h5 class="uppercase">Starter</h5>
                        <span class="price">$12</span>
                        <p class="lead">Per Month</p>
                        <a class="btn btn-white btn-lg" href="#">Get Started</a>
                        <p>
                            30 Day Free Trial
                            <br> No Credit Card Required
                        </p>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-pricing-2" class="vim" vbp="Pricing" vbr="Pricing Extended">
     <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h4 class="uppercase mb16">Extended Plans</h4>
                    <p class="lead mb64">
                        Perfect for plans with greater detail. Alter appearance with '.boxed' and '.emphasis' classes
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="pricing-table pt-2 text-center" vht="parent">
                        <h5 class="uppercase">Starter</h5>
                        <span class="price">$12</span>
                        <p class="lead">Per Month</p>
                        <a class="btn btn-filled btn-lg" href="#">Get Started</a>
                        <ul>
                            <li>
                                <strong>Unlimited</strong> access to content
                            </li>
                            <li>
                                <strong>Fully Secure</strong> online backup
                            </li>
                            <li>
                                <strong>One Year</strong> round the clock support
                            </li>
                            <li>
                                <strong>FREE</strong> complimentary lanyard
                            </li>
                        </ul>
                    </div>
                    
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="pricing-table pt-2 boxed text-center" vht="parent">
                        <h5 class="uppercase">Starter</h5>
                        <span class="price">$12</span>
                        <p class="lead">Per Month</p>
                        <a class="btn btn-filled btn-lg" href="#">Get Started</a>
                        <ul>
                            <li>
                                <strong>Unlimited</strong> access to content
                            </li>
                            <li>
                                <strong>Fully Secure</strong> online backup
                            </li>
                            <li>
                                <strong>One Year</strong> round the clock support
                            </li>
                            <li>
                                <strong>FREE</strong> complimentary lanyard
                            </li>
                        </ul>
                    </div>
                    
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="pricing-table pt-2 emphasis text-center" vht="parent">
                        <h5 class="uppercase">Starter</h5>
                        <span class="price">$12</span>
                        <p class="lead">Per Month</p>
                        <a class="btn btn-white btn-lg" href="#">Get Started</a>
                        <ul>
                            <li>
                                <strong>Unlimited</strong> access to content
                            </li>
                            <li>
                                <strong>Fully Secure</strong> online backup
                            </li>
                            <li>
                                <strong>One Year</strong> round the clock support
                            </li>
                            <li>
                                <strong>FREE</strong> complimentary lanyard
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-pricing-3" class="vim" vbp="Pricing" vbr="Pricing with Text">
     <section>
        <div class="container">
            <div class="row v-align-children">
                <div class="col-sm-5">
                    <h3>Join us for a day of
                        <br> ideas &amp; discussion.</h3>
                    <p class="lead mb40">
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                    </p>
                    <div class="overflow-hidden mb32 mb-xs-24">
                        <i class="ti-package icon icon-sm pull-left"></i>
                        <h6 class="uppercase mb0 inline-block p32">All Inclusive Package</h6>
                    </div>
                    <div class="overflow-hidden mb32 mb-xs-24">
                        <i class="ti-medall-alt icon icon-sm pull-left"></i>
                        <h6 class="uppercase mb0 inline-block p32">Foundry Club Access</h6>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="pricing-table pt-1 text-center emphasis">
                        <h5 class="uppercase">Admit One</h5>
                        <span class="price">$89</span>
                        <p class="lead">Per Ticket</p>
                        <a class="btn btn-white btn-lg" href="#">Purchase Ticket</a>
                        <p>
                            <a href="#">Contact Us for</a>
                            <br> large ticket volumes
                        </p>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-testimonial-1" class="vim" vbp="Testimonial" vbr="Testimonial Feature">
     <section class="image-edge pt120 pb120 pt-xs-40 pb-xs-40 toggle-bg-mrv">
        <div class="col-md-6 col-sm-4 p0 col-md-push-6 col-sm-push-8">
            <img alt="Screenshot" class="cast-shadow mb-xs-24" src="../img/app3.jpg">
        </div>
        <div class="container">
            <div class="col-md-5 col-md-pull-0 col-sm-7 col-sm-pull-4 v-align-transform">
                <h3 class="mb40 mb-xs-16">Use the pre-built text and image variations to spruik cool features.</h3>
                <p class="lead mb40">
                    We've built three distinct image and text combinations for you to showcase the features of your product or service.
                </p>
                <div class="feature boxed">
                    <p>
                        "What a sick app this is - I've been searching forever for something like this to come along - WOW"
                    </p>
                    <div class="spread-children">
                        <img alt="Pic" class="image-xs" src="../img/avatar1.png">
                        <span>Anne Bracken - Themeforest</span>
                    </div>
                </div>
            </div>
        </div>
        
    </section>
</section>

<section id="variant-testimonial-2" class="vim" vbp="Testimonial,slider" vbr="Testimonial Slider">
     <section class="image-bg overlay parallax">
        <div class="background-image-holder">
            <img alt="image" class="background-image" src="../img/app2.jpg">
        </div>
        <div class="container">
            <div class="row mb40 mb-xs-24">
                <div class="col-sm-12 text-center spread-children">
                    <img class="image-xs" alt="Pic" src="../img/avatar1.png">
                    <img class="image-xs" alt="Pic" src="../img/avatar2.png">
                    <img class="image-xs" alt="Pic" src="../img/avatar3.png">
                </div>
            </div>
            
            <div class="row mb16 mb-xs-0">
                <div class="col-sm-12 text-center">
                    <h3>People just like you are already loving Foundry</h3>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                    <div class="text-slider slider-arrow-controls text-center relative">
                        <ul class="slides">
                            <li>
                                <p class="lead">It's clear to see just how seriously these guys take design. I've never come across a template with the level of polish as this - and don't even get me started on the page builder, there is simply NO competition. Customer for life.</p>
                                <div class="quote-author">
                                    <h6 class="uppercase mb0">Anna Thompson</h6>
                                    <span>Themeforest Customer</span>
                                </div>
                            </li>
                            <li>
                                <p class="lead">I love the ease-of-use the builder provides - I can quickly test different combinations and experiment with font and color combinations to find that sweet spot. Kudos for the amazing support too, really quick turnaround!</p>
                                <div class="quote-author">
                                    <h6 class="uppercase mb0">Rick Dempsey</h6>
                                    <span>Themeforest Customer</span>
                                </div>
                            </li>
                            <li>
                                <p class="lead">A fine example of atomic design brought to life. As a seasoned template user, I really appreciate the consistent styling for all common tags, it makes customising the sections that much easier. 5 stars as always for an amazing template.</p>
                                <div class="quote-author">
                                    <h6 class="uppercase mb0">Gill Sans</h6>
                                    <span>Themeforest Customer</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-testimonial-4" class="vim" vbp="Testimonial,slider" vbr="Testimonial Slider 2">
     <section class="bg-secondary toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2 text-center">
                    <h3 class="mb64 uppercase">People &nbsp;
                        <i class="ti-heart"></i>&nbsp; Foundry</h3>
                    <div class="testimonials text-slider slider-arrow-controls">
                        <ul class="slides">
                            <li>
                                <p class="lead">It's clear to see just how seriously these guys take design. I've never come across a template with the level of polish as this - and don't even get me started on the page builder, there is simply NO competition. Customer for life.</p>
                                <div class="quote-author">
                                    <img alt="Avatar" src="../img/avatar1.png">
                                    <h6 class="uppercase">Anna Thompson</h6>
                                    <span>Themeforest Customer</span>
                                </div>
                            </li>
                            <li>
                                <p class="lead">I love the ease-of-use the builder provides - I can quickly test different combinations and experiment with font and color combinations to find that sweet spot. Kudos for the amazing support too, really quick turnaround!</p>
                                <div class="quote-author">
                                    <img alt="Avatar" src="../img/avatar2.png">
                                    <h6 class="uppercase">Rick Dempsey</h6>
                                    <span>Themeforest Customer</span>
                                </div>
                            </li>
                            <li>
                                <p class="lead">A fine example of atomic design brought to life. As a seasoned template user, I really appreciate the consistent styling for all common tags, it makes customising the sections that much easier. 5 stars as always for an amazing template.</p>
                                <div class="quote-author">
                                    <img alt="Avatar" src="../img/avatar3.png">
                                    <h6 class="uppercase">Gill Sans</h6>
                                    <span>Themeforest Customer</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-testimonial-4" class="vim" vbp="Testimonial,slider" vbr="Testimonial Slider 2">
     <section class="bg-secondary toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2 text-center">
                    <h3 class="mb64 uppercase">People &nbsp;
                        <i class="ti-heart"></i>&nbsp; Foundry</h3>
                    <div class="testimonials text-slider slider-arrow-controls">
                        <ul class="slides">
                            <li>
                                <p class="lead">It's clear to see just how seriously these guys take design. I've never come across a template with the level of polish as this - and don't even get me started on the page builder, there is simply NO competition. Customer for life.</p>
                                <div class="quote-author">
                                    <img alt="Avatar" src="../img/avatar1.png">
                                    <h6 class="uppercase">Anna Thompson</h6>
                                    <span>Themeforest Customer</span>
                                </div>
                            </li>
                            <li>
                                <p class="lead">I love the ease-of-use the builder provides - I can quickly test different combinations and experiment with font and color combinations to find that sweet spot. Kudos for the amazing support too, really quick turnaround!</p>
                                <div class="quote-author">
                                    <img alt="Avatar" src="../img/avatar2.png">
                                    <h6 class="uppercase">Rick Dempsey</h6>
                                    <span>Themeforest Customer</span>
                                </div>
                            </li>
                            <li>
                                <p class="lead">A fine example of atomic design brought to life. As a seasoned template user, I really appreciate the consistent styling for all common tags, it makes customising the sections that much easier. 5 stars as always for an amazing template.</p>
                                <div class="quote-author">
                                    <img alt="Avatar" src="../img/avatar3.png">
                                    <h6 class="uppercase">Gill Sans</h6>
                                    <span>Themeforest Customer</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-testimonial-3" class="vim" vbp="Testimonial" vbr="Testimonial Cards">
     <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row mb64 mb-xs-24">
                <div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
                    <h3>People like you love Foundry</h3>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-4 text-center">
                    <div class="feature boxed cast-shadow-light" vht="parent"> 
                        <img alt="Pic" class="image-small inline-block mb24" src="../img/avatar1.png">
                        <h4>"Polished, Incredible!"</h4>
                        <p>
                            It's clear to see just how seriously these guys take design. I've never come across a template with the level of polish as this!
                        </p>
                        <span>
                            <strong>Anne Potter</strong> - via Envato</span>
                    </div>
                </div>
                <div class="col-sm-4 text-center">
                    <div class="feature boxed cast-shadow-light" vht="parent">
                        <img alt="Pic" class="image-small inline-block mb24" src="../img/avatar2.png">
                        <h4>"Customer For Life"</h4>
                        <p>
                            I love the ease-of-use the builder provides - I can quickly test different combinations and experiment with font and color combinations to find that sweet spot.
                        </p>
                        <span>
                            <strong>Jake Sims</strong> - via Twitter</span>
                    </div>
                </div>
                <div class="col-sm-4 text-center">
                    <div class="feature boxed cast-shadow-light" vht="parent">
                        <img alt="Pic" class="image-small inline-block mb24" src="../img/avatar3.png">
                        <h4>"Almost too easy!"</h4>
                        <p>
                            As a seasoned template user, I really appreciate the consistent styling for all common tags, it makes customising the sections that much easier.
                        </p>
                        <span>
                            <strong>Larry Smith</strong> - via Envato</span>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-testimonial-5" class="vim" vbp="Testimonial" vbr="Testimonial on Image">
     <section class="image-bg bg-light parallax overlay pt160 pb160 pt-xs-80 pb-xs-80">
        <div class="background-image-holder">
            <img alt="image" class="background-image" src="../img/intro1.jpg">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-7 col-sm-8">
                    <i class="ti-quote-left icon icon-sm mb16"></i>
                    <h3 class="mb32">Foundry provided us the tools, capital and expertise we needed to launch Lactick to reach a global audience.</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-cta-1" class="vim" vbp="CTA" vbr="CTA on Image">
     <section class="image-bg parallax overlay">
        <div class="background-image-holder">
            <img alt="Background Image" class="background-image" src="../img/home2.jpg">
        </div>
        <div class="container">
            <div class="row mb64 mb-xs-24">
                <div class="col-sm-6 col-md-5 text-right text-center-xs">
                    <h1 class="large mb8">10,000+</h1>
                    <h6 class="uppercase">Customers using our templates</h6>
                </div>
                <div class="col-md-2 text-center hidden-sm hidden-xs">
                    <i class="ti-infinite icon icon-lg mt8 mt-xs-0"></i>
                </div>
                <div class="col-sm-6 col-md-5 text-center-xs">
                    <h1 class="large mb8">Limitless</h1>
                    <h6 class="uppercase">Layout potential using Foundry</h6>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h3 class="mb40 mb-xs-24">Authentic, handcrafted design that gives your
                        <br> site subtle, confident appeal.</h3>
                    <a class="btn btn-lg btn-filled" href="chooser.html">Check Out The Demos</a>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-cta-2" class="vim" vbp="CTA,form" vbr="CTA with Form" icons="mailchimp-cmonitor">
     <section class="image-bg parallax overlay">
            <div class="background-image-holder">
                <img alt="image" class="background-image" src="../img/home-2-5.jpg">
            </div>
            <div class="container">
                <div class="row mb40 mb-xs-24">
                    <div class="col-sm-12 text-center">
                        <h3 class="mb8">Subscribe for a monthly roundup of best bits.</h3>
                        <p>Don't worry, we hate spam too - that's why we only send out monthly emails.</p>
                    </div>
                </div>
                
                <div class="row mb80 mb-xs-24">
                    <div class="col-sm-6 col-sm-offset-3">
                        <form class="form-newsletter halves" data-success="Thanks for your registration, we will be in touch shortly." data-error="Please fill all fields correctly.">
                            <input type="text" name="email" class="mb0 transparent validate-email validate-required signup-email-field" placeholder="Email Address">
                            <button type="submit" class="mb0">Subscribe</button>
                            <iframe srcdoc="<!-- Begin MailChimp Signup Form --><link href=&quot;https://cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;><style type=&quot;text/css&quot;>    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */</style><div id=&quot;mc_embed_signup&quot;><form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=94d040322a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>    <div id=&quot;mc_embed_signup_scroll&quot;>    <h2>Subscribe to our mailing list</h2><div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span></label>    <input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-FNAME&quot;>First Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-LNAME&quot;>Last Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;></div>    <div id=&quot;mce-responses&quot; class=&quot;clear&quot;>        <div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div>        <div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div>    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->    <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_94d040322a&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>    <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>    </div></form></div><script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><!--End mc_embed_signup-->" class="mail-list-form">
                            </iframe>
                        </form>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-sm-12 text-center spread-children-large">
                        <img alt="pic" class="image-xxs mb-xs-8 fade-1-4" src="../img/c1.png">
                        <img alt="pic" class="image-xxs mb-xs-8 fade-1-4" src="../img/c2.png">
                        <img alt="pic" class="image-xxs mb-xs-8 fade-1-4" src="../img/c3.png">
                        <img alt="pic" class="image-xxs mb-xs-8 fade-1-4" src="../img/c4.png">
                    </div>
                </div>
                
            </div>
            
        </section>
</section>

<section id="variant-cta-3" class="vim" vbp="CTA" vbr="CTA with Avatars">
     <section class="bg-secondary toggle-bg-mrv">
        <div class="container">
            <div class="row mb64 mb-xs-24">
                <div class="col-sm-12 text-center spread-children-large">
                    <img alt="Pic" src="../img/avatar1.png">
                    <img alt="Pic" src="../img/avatar2.png">
                    <img alt="Pic" src="../img/avatar3.png">
                    <img alt="Pic" src="../img/avatar4.png">
                    <img alt="Pic" src="../img/avatar5.png">
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                    <h2>Built by professionals, just for you.</h2>
                    <p class="mb40 mb-xs-24">
                        Foundry is a remarkably complete template offering you a plethora of handcrafted design elements. Whether promoting a product, service or portfolio - Foundry's unique and flexible style has you covered.
                    </p>
                    <a class="mb0 btn btn-lg btn-filled" href="#purchase-template">Purchase Foundry</a>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-cta-4" class="vim" vbp="CTA,form" vbr="CTA with Form 2" icons="mailchimp-cmonitor">
     <section class="bg-primary">
        <div class="container">
            <div class="row mb48 mb-xs-24">
                <div class="col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1 text-center">
                    <img alt="Pic" class="mb16" src="../img/vent2.png">
                    <h5 class="uppercase">Exclusive Offers, Travel Tips &amp; More</h5>
                </div>
            </div>
            
            <div class="row mb40 mb-xs-24">
                <div class="col-sm-6 col-sm-offset-3">
                    <form class="form-newsletter halves" data-success="Thanks for your registration, we will be in touch shortly." data-error="Please fill all fields correctly.">
                        <input type="text" name="email" class="mb0 transparent validate-email validate-required signup-email-field" placeholder="Email Address">
                        <button type="submit" class="btn-white mb0">Keep Me Informed</button>
                        <iframe srcdoc="<!-- Begin MailChimp Signup Form --><link href=&quot;https://cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;><style type=&quot;text/css&quot;>    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */</style><div id=&quot;mc_embed_signup&quot;><form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=94d040322a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>    <div id=&quot;mc_embed_signup_scroll&quot;>    <h2>Subscribe to our mailing list</h2><div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span></label>    <input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-FNAME&quot;>First Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-LNAME&quot;>Last Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;></div>    <div id=&quot;mce-responses&quot; class=&quot;clear&quot;>        <div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div>        <div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div>    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->    <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_94d040322a&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>    <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>    </div></form></div><script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><!--End mc_embed_signup-->" class="mail-list-form">
                        </iframe>
                    </form>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-12 text-center">
                    <p class="fade-half lead mb0">*Newsletters are sent bi-monthly</p>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-cta-5" class="vim" vbp="CTA" vbr="CTA with One Liner">
     <section class="bg-primary">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h3 class="mb0 inline-block p32 p0-xs">Purchase Early-Bird tickets for 20% off</h3>
                    <a class="btn btn-lg btn-white mb8 mt-xs-24" href="#">Purchase Tickets</a>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-cta-6" class="vim" vbp="CTA" vbr="CTA on Dark BG">
     <section class="bg-dark pt64 pb64">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h2 class="mb8">Start A Foundry Project</h2>
                    <p class="lead mb40 mb-xs-24">
                        Variant Page Builder, Over 100 Page Templates - The choice is clear.
                    </p>
                    <a class="btn btn-filled btn-lg mb0" href="#purchase-template">Purchase Foundry</a>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-cta-7" class="vim" vbp="CTA" vbr="CTA w/ Product shot">
	 <section class="bg-dark pb0">
		<div class="container">
			<div class="row mb64 mb-xs-32">
				<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center">
					<h1 class="large">Go on, buy it.</h1>
					<p class="lead mb48 mb-xs-32 fade-1-4"> 
						Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.	
					</p>
					<a class="btn btn-lg btn-filled" href="#purhcase-template">I'm ready to Start the journey</a>
				</div>
			</div>
			
			<div class="row">
				<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center">
					<img alt="App" src="../img/app6.png">
				</div>	
			</div>
		</div>
	</section>
</section>

<section id="variant-gallery-1" class="vim" vbp="gallery,slider" vbr="Simple Slider">
     <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h4 class="uppercase mb16">Standard Slider</h4>
                    <p class="lead mb64">
                        Image slider gallery with all controls. Initialize with 'slider-all-controls' class.
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-12">
                    <div class="image-slider slider-all-controls controls-inside">
                        <ul class="slides">
                            <li>
                                <img alt="Image" src="../img/cover14.jpg">
                            </li>
                            <li>
                                <img alt="Image" src="../img/cover15.jpg">
                            </li>
                            <li>
                                <img alt="Image" src="../img/cover16.jpg">
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-gallery-2" class="vim" vbp="gallery,social" vbr="Instagram Grid Gallery" icons="instagram">
     <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h4 class="uppercase mb16">Instagram Grid</h4>
                    <p class="lead mb64">
                        A simple Instagram grid. Change the 'data-user-name' attribute to change user feed.
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-12">
                    <div class="instafeed grid-gallery" data-user-name="funsizeco">
                        <ul></ul>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-gallery-3" class="vim" vbp="gallery" vbr="Lightbox Grid Gallery">
     <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h4 class="uppercase mb16">Lightbox Grid Gallery</h4>
                    <p class="lead mb64">
                        A simple lightbox grid with square thumbnails.
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-12">
                    <div class="lightbox-grid square-thumbs lightbox-gallery-mrv" data-gallery-title="Gallery">
                        <ul>
                            <li class="veo">
                                <a href="../img/cover1.jpg" class="ven" data-lightbox="true" vht="parent">
                                    <div class="background-image-holder">
                                        <img alt="image" class="background-image" src="../img/cover1.jpg">
                                    </div>
                                </a>
                            </li>
                            <li class="veo">
                                <a href="../img/home12.jpg" class="ven" data-lightbox="true" vht="parent">
                                    <div class="background-image-holder">
                                        <img alt="image" class="background-image" src="../img/home12.jpg">
                                    </div>
                                </a>
                            </li>
                            <li class="veo">
                                <a href="../img/home14.jpg" class="ven" data-lightbox="true" vht="parent">
                                    <div class="background-image-holder">
                                        <img alt="image" class="background-image" src="../img/home14.jpg">
                                    </div>
                                </a>
                            </li>
                            <li class="veo">
                                <a href="../img/home17.jpg" class="ven" data-lightbox="true" vht="parent">
                                    <div class="background-image-holder">
                                        <img alt="image" class="background-image" src="../img/home17.jpg">
                                    </div>
                                </a>
                            </li>
                            <li class="veo">
                                <a href="../img/cover5.jpg" class="ven" data-lightbox="true" vht="parent">
                                    <div class="background-image-holder">
                                        <img alt="image" class="background-image" src="../img/cover5.jpg">
                                    </div>
                                </a>
                            </li>
                            <li class="veo">
                                <a href="../img/cover6.jpg" class="ven" data-lightbox="true" vht="parent">
                                    <div class="background-image-holder">
                                        <img alt="image" class="background-image" src="../img/cover6.jpg">
                                    </div>
                                </a>
                            </li>
                            <li class="veo">
                                <a href="../img/cover7.jpg" class="ven" data-lightbox="true" vht="parent">
                                    <div class="background-image-holder">
                                        <img alt="image" class="background-image" src="../img/cover7.jpg">
                                    </div>
                                </a>
                            </li>
                            <li class="veo">
                                <a href="../img/cover8.jpg" class="ven" data-lightbox="true" vht="parent">
                                    <div class="background-image-holder">
                                        <img alt="image" class="background-image" src="../img/cover8.jpg">
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-social-1" class="vim" vbp="social" vbr="Twitter Feed">
     <section class="bg-dark pt120 pb120 pt-xs-40 pb-xs-40 toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 text-center">
                    <i class="ti-twitter-alt icon icon-lg color-primary mb40 mb-xs-24"></i>
                    <div class="twitter-feed tweets-slider large vjx">
                        <div class="tweets-feed" data-widget-id="492085717044981760">
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </section>
</section>

<section id="variant-social-2" class="vim" vbp="social" vbr="Instagram feed w/ text">
	 <section class="bg-dark pb64 toggle-bg-mrv">
		<div class="container">
			<div class="row mb64 mb-xs-32">
				<div class="col-sm-6 col-sm-offset-3 text-center">
					<h2 class="uppercase bold italic"><i class="ti-instagram">&nbsp;</i>usernamehere</h2>
					<p class="lead">
						Follow me on Instagram for workout inspiration and shots from our awesome group fitness sessions.
					</p>
				</div>
			</div>
		</div>
		<div class="instafeed grid-gallery gapless mb64 mb-xs-32 relative" data-user-name="fitlinepersonaltraining">
			<ul></ul>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-sm-6 col-sm-offset-3 text-center">
					<a class="btn btn-lg btn-filled mb0" href="#">See more on Instagram</a>
				</div>
			</div>
		</div>
	</section>
</section>

<section id="variant-countdown-1" class="vim" vbp="Countdown" vbr="Countdown with Form" icons="mailchimp-cmonitor">
     <section class="cover fullscreen image-bg overlay">
        <div class="background-image-holder">
            <img alt="image" class="background-image" src="../img/cover13.jpg">
        </div>
        <div class="container v-align-transform">
            <div class="row">
                <div class="col-sm-12">
                    <div class="text-center">
                        <h3 class="uppercase mb40 mb-xs-24">Launching Soon</h3>
                        <div class="countdown mb40" data-date="2015/12/01"></div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center">
                    <p>
                        We'll be launching our new site in the coming weeks. Hit the form below to get notified as we launch. Thanks for your interest!
                    </p>
                    <form class="halves form-newsletter" data-success="Thanks for your submission, we will be in touch shortly." data-error="Please fill all fields correctly.">
                        <input class="mb16 validate-required validate-email signup-email-field" type="text" placeholder="Email Address" name="email">
                        <button class="mb16" type="submit">Notify Me</button>
                        <span>*We won't share your email with third parties.</span>
                        <iframe srcdoc="<!-- Begin MailChimp Signup Form --><link href=&quot;https://cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;><style type=&quot;text/css&quot;>    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */</style><div id=&quot;mc_embed_signup&quot;><form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=94d040322a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>    <div id=&quot;mc_embed_signup_scroll&quot;>    <h2>Subscribe to our mailing list</h2><div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span></label>    <input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-FNAME&quot;>First Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-LNAME&quot;>Last Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;></div>    <div id=&quot;mce-responses&quot; class=&quot;clear&quot;>        <div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div>        <div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div>    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->    <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_94d040322a&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>    <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>    </div></form></div><script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><!--End mc_embed_signup-->" class="mail-list-form">
                        </iframe>
                    </form>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-countdown-2" class="vim" vbp="Countdown" vbr="Countdown with Form 2" icons="mailchimp-cmonitor">
     <section class="image-edge bg-secondary toggle-bg-mrv">
        <div class="col-md-6 col-sm-4 p0">
            <img alt="Screenshot" class="mb-xs-24" src="../img/phone1.png">
        </div>
        <div class="container">
            <div class="col-md-5 col-md-offset-1 col-sm-7 col-sm-offset-1 v-align-transform right">
                <h3 class="uppercase mb40 mb-xs-24">Launching Soon</h3>
                <div class="countdown mb40" data-date="2015/12/01"></div>
                <p>
                    We'll be launching our new site in the coming weeks. Hit the form below to get notified as we launch. Thanks for your interest!
                </p>
                <form class="halves form-newsletter" data-success="Thanks for your submission, we will be in touch shortly." data-error="Please fill all fields correctly.">
                    <input class="mb16 validate-required validate-email signup-email-field" type="text" placeholder="Email Address" name="email">
                    <button class="mb16" type="submit">Notify Me</button>
                    <span>*We won't share your email with third parties.</span>
                    <iframe srcdoc="<!-- Begin MailChimp Signup Form --><link href=&quot;https://cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;><style type=&quot;text/css&quot;>    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */</style><div id=&quot;mc_embed_signup&quot;><form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=94d040322a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>    <div id=&quot;mc_embed_signup_scroll&quot;>    <h2>Subscribe to our mailing list</h2><div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span></label>    <input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-FNAME&quot;>First Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-LNAME&quot;>Last Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;></div>    <div id=&quot;mce-responses&quot; class=&quot;clear&quot;>        <div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div>        <div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div>    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->    <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_94d040322a&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>    <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>    </div></form></div><script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><!--End mc_embed_signup-->" class="mail-list-form">
                    </iframe>
                </form>
            </div>
        </div>
        
    </section>
</section>

<section id="variant-video-1" class="vim" vbp="video" vbr="Inline Video">
    <section class="bg-secondary toggle-bg-mrv">
        <div class="container">
            <div class="row v-align-children">
                <div class="col-md-7 col-sm-6 text-center mb-xs-24">
                    <div class="local-video-container">
                        <div class="background-image-holder">
                            <img alt="Background Image" class="background-image" src="../img/home3.jpg">
                        </div>
                        <video controls="">
                            <source src="../video/video.webm" type="video/webm">
                                </source><source src="../video/video.mp4" type="video/mp4">
                                    </source><source src="../video/video.ogv" type="video/ogg">
                        </source></video>
                        <div class="play-button"></div>
                    </div>
                    
                </div>
                <div class="col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-1">
                    <h3>Design that looks less 'theme' and more you.</h3>
                    <p>
                        Foundry offers you the modularity and ease-of-use of a template with the style and aesthetic of contemporary, bespoke web design.
                    </p>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-video-2" class="vim" vbp="video" vbr="Inline Embedded Video" icons="youtube-vimeo">
    <section class="bg-secondary toggle-bg-mrv">
        <div class="container">
            <div class="row v-align-children">
                <div class="col-md-7 col-sm-6 text-center mb-xs-24">
                    <div class="embed-video-container embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" no-src="http://player.vimeo.com/video/120433187?badge=0&title=0&byline=0&title=0"></iframe>
                    </div>
                </div>
                <div class="col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-1">
                    <h3>Design that looks less 'theme' and more you.</h3>
                    <p>
                        Foundry offers you the modularity and ease-of-use of a template with the style and aesthetic of contemporary, bespoke web design.
                    </p>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-video-3" class="vim" vbp="video" vbr="Inline Video w/ Description">
    <section class="bg-primary">
        <div class="container">
            <div class="row mb64 mb-xs-24">
                <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                    <h3 class="mb40 mb-xs-24">A landing page for the next generation.</h3>
                    <p class="lead">
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.
                    </p>
                </div>
            </div>
            
            <div class="row mb48 mb-xs-24">
                <div class="col-sm-8 col-sm-offset-2">
                    <div class="local-video-container mb40">
                        <div class="background-image-holder">
                            <img alt="Background Image" class="background-image" src="../img/capital3.jpg">
                        </div>
                        <video controls="">
                            <source src="../video/video.webm" type="video/webm">
                            </source><source src="../video/video.mp4" type="video/mp4">
                            </source><source src="../video/video.ogv" type="video/ogg">
                        </source></video>
                        <div class="play-button dark"></div>
                    </div>
                    
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-12 text-center spread-children-large">
                    <img alt="pic" class="image-xxs mb-xs-8 fade-half" src="../img/c1.png">
                    <img alt="pic" class="image-xxs mb-xs-8 fade-half" src="../img/c2.png">
                    <img alt="pic" class="image-xxs mb-xs-8 fade-half" src="../img/c3.png">
                    <img alt="pic" class="image-xxs mb-xs-8 fade-half" src="../img/c4.png">
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-text-1" class="vim" vbp="text" vbr="Text in Columns">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h2 class="number">2008</h2>
                    <p>
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
                    </p>
                </div>
                <div class="col-sm-4">
                    <h2 class="number">150+</h2>
                    <p>
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
                    </p>
                </div>
                <div class="col-sm-4">
                    <h2>Millions</h2>
                    <p>
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
                    </p>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-text-2" class="vim" vbp="text" vbr="Text Columns w/ Image">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="image-tile outer-title text-center" vht="parent">
                        <img alt="Pic" src="../img/team-1.jpg">
                        <div class="title mb16">
                            <h5 class="uppercase mb0">Sally Marsh</h5>
                            <span>Creative Director</span>
                        </div>
                        <p class="mb0">
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
                        </p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="image-tile outer-title text-center" vht="parent">
                        <img alt="Pic" src="../img/team-2.jpg">
                        <div class="title mb16">
                            <h5 class="uppercase mb0">Tim Foley</h5>
                            <span>iOS Developer</span>
                        </div>
                        <p class="mb0">
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
                        </p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="image-tile outer-title text-center" vht="parent">
                        <img alt="Pic" src="../img/team-3.jpg">
                        <div class="title mb16">
                            <h5 class="uppercase mb0">Jake Robbins</h5>
                            <span>Brand Director</span>
                        </div>
                        <p class="mb0">
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
                        </p>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-text-3" class="vim" vbp="text" vbr="Text with Stats">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row v-align-children">
                <div class="col-sm-6 col-md-5">
                    <h2 class="uppercase color-primary">The Perfect Place To Call Home</h2>
                    <hr>
                    <p>
                        Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </p>
                </div>
                <div class="col-sm-6 col-md-offset-1 p0">
                    <div class="col-sm-6 text-center">
                        <div class="feature bordered mb30">
                            <h1 class="large uppercase">5</h1>
                            <h5 class="uppercase">Bedrooms</h5>
                        </div>
                    </div>
                    
                    <div class="col-sm-6 text-center">
                        <div class="feature bordered mb30">
                            <h1 class="large">2</h1>
                            <h5 class="uppercase">Living</h5>
                        </div>
                    </div>
                    
                    <div class="col-sm-6 text-center">
                        <div class="feature bordered mb30">
                            <h1 class="large">4</h1>
                            <h5 class="uppercase">Bathroom</h5>
                        </div>
                    </div>
                    
                    <div class="col-sm-6 text-center">
                        <div class="feature bordered mb30">
                            <h1 class="large">3</h1>
                            <h5 class="uppercase">Parking</h5>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-text-4" class="vim" vbp="text" vbr="Text with Progress">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-5">
                    <h4 class="uppercase">Diversity & Difference</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
                    </p>
                </div>
                <div class="col-sm-7">
                    <h4 class="uppercase">Service Spread</h4>
                    <div class="progress-bars">
                        <div class="progress progress-1">
                            <div class="progress-bar" data-progress="90" vht="parent">
                                <span class="title">Branding</span>
                            </div>
                        </div>
                        
                        <div class="progress progress-1">
                            <div class="progress-bar" data-progress="70" vht="parent">
                                <span class="title">E-Commerce</span>
                            </div>
                        </div>
                        
                        <div class="progress progress-1">
                            <div class="progress-bar" data-progress="60" vht="parent">
                                <span class="title">Websites</span>
                            </div>
                        </div>
                        
                        <div class="progress progress-1">
                            <div class="progress-bar" data-progress="50" vht="parent">
                                <span class="title">iOS Apps</span>
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-text-5" class="vim" vbp="text" vbr="Simple News Item">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="feed-item mb96 mb-xs-48">
                <div class="row mb16 mb-xs-0">
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                        <h6 class="uppercase mb16 mb-xs-8">September 8th</h6>
                        <h3>A clean, simple way to share
                            <br> basic updates about your company.</h3>
                    </div>
                </div>
                
                <div class="row mb32 mb-xs-16">
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                        <img alt="Article Image" class="mb32 mb-xs-16" src="../img/blog-single.jpg">
                        <p class="lead">
                            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
                        </p>
                        <p class="lead">
                            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur
                        </p>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                        <a class="mb48 mb-xs-32 btn btn-lg" href="#">Share Article</a>
                        <hr>
                    </div>
                </div>
            </div>
            
        </div></section>
</section>

<section id="variant-text-6" class="vim" vbp="text" vbr="Text with Stats 2">
    <section class="bg-dark toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h3 class="uppercase">
                        Creating Vibrant
                        <br> Spaces & Communites
                    </h3>
                </div>
            </div>
            
            <div class="row mb80 mb-xs-24">
                <div class="col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1 text-center">
                    <p>
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-5 col-sm-offset-1 text-center">
                    <div class="feature boxed">
                        <h1 class="large">64</h1>
                        <h5 class="uppercase">Award Winning Projects</h5>
                    </div>
                </div>
                <div class="col-sm-5 text-center">
                    <div class="feature boxed">
                        <h1 class="large">#3</h1>
                        <h5 class="uppercase">Architects Australia</h5>
                    </div>
                </div>
            </div>
        </div>
        
    </section>
</section>

<section id="variant-text-7" class="vim" vbp="text" vbr="Wide Paragraph">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1 text-center">
                    <h3 class="uppercase color-primary mb40 mb-xs-24">A Place To Call Home</h3>
                    <p class="lead">
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    </p>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-text-8" class="vim" vbp="text" vbr="Text with Stats 3">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h6 class="uppercase">About Foundry</h6>
                    <hr class="mb160 mb-xs-24">
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-10">
                    <h1 class="thin">Investing in innovative technology companies since '88</h1>
                </div>
            </div>
            
            <div class="row mb160 mb-xs-0">
                <div class="col-md-6 col-sm-8">
                    <p class="lead">
                        Foundry partners with passionate entrepreneurs and startups to build enduring, era-defining companies that define their categories.
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-4 mb-xs-24">
                    <h1 class="large color-primary mb0">140+</h1>
                    <h5 class="color-primary mb0">Profitable M&amp;A Ventures</h5>
                </div>
                <div class="col-sm-4 mb-xs-24">
                    <h1 class="large color-primary mb0">$1.2b+</h1>
                    <h5 class="color-primary mb0">Capital Invested</h5>
                </div>
                <div class="col-sm-4">
                    <h1 class="large color-primary mb0">4/5</h1>
                    <h5 class="color-primary mb0">Companies Yielding Profit</h5>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-text-9" class="vim" vbp="text" vbr="Menu Cards">
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-push-6 pt80 pt-xs-0">
                    <div class="feature bordered text-center bg-secondary">
                        <h3 class="uppercase mb40 mb-xs-24">ENTRÉE</h3>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Braised Duck Confit</h6>
                            <p vht="div">
                                Lightly seasoned with buttered sage and fig hearts.
                            </p>
                        </div>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Roasted Artichoke</h6>
                            <p vht="div">
                                Served with a tangy horseradish cream on a bed of slaw.
                            </p>
                        </div>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Salad of Northern Greens</h6>
                            <p vht="div">
                                A selection of freshly foraged greens from Northern Australia.
                            </p>
                        </div>
                    </div>
                    <div class="feature bordered text-center">
                        <h3 class="uppercase mb40 mb-xs-24">Dessert</h3>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Berry Confit</h6>
                            <p vht="div">
                                Lightly seasoned berries with buttered sage and fig hearts.
                            </p>
                        </div>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Roasted Pear Crumble</h6>
                            <p vht="div">
                                Served with a fluffy butterscotch cream on a bed of apple slaw.
                            </p>
                        </div>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Salad of Northern Fruits</h6>
                            <p vht="div">
                                A selection of freshly foraged fruit from Northern Australia.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-md-pull-6">
                    <div class="feature bordered hidden-xs hidden-sm">
                        <h1 class="large uppercase mb64 mb-xs-24">menu</h1>
                        <p>
                            <strong>Please note we offer vegetarian options and can cater
                                <br> for most dietary requirements.</strong>
                        </p>
                        <p>
                            In addition, we are also able to offer dietary
                            <br> specific tasting menus upon request.
                        </p>
                    </div>
                    <div class="feature bordered text-center bg-primary">
                        <h3 class="uppercase mb40 mb-xs-24">Main</h3>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Braised Duck Confit</h6>
                            <p vht="div">
                                Lightly seasoned with buttered sage and fig hearts.
                            </p>
                        </div>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Roasted Artichoke</h6>
                            <p vht="div">
                                Served with a tangy horseradish cream on a bed of slaw.
                            </p>
                        </div>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Salad of Northern Greens</h6>
                            <p vht="div">
                                A selection of freshly foraged greens from Northern Australia.
                            </p>
                        </div>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Fried Spring Rolls</h6>
                            <p vht="div">
                                Lightly fried in Sesami Oil, filled with fresh chicken or beef.
                            </p>
                        </div>
                        <div class="mb40">
                            <h6 class="mb8 uppercase" vht="div">Caramel Pork Belly</h6>
                            <p vht="div">
                                Slow roasted Pork Belly served with apple slaw.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-text-10" class="vim" vbp="text" vbr="Offset Text Block">
	<section class="bg-primary">
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-md-offset-1 text-right text-left-xs col-sm-5">
					<h1 class="uppercase mb24 bold italic">Fitness<br>For Life</h1>
					<h5 class="uppercase italic fade-1-4">&ldquo;My passion is motivating<br> people to get results&rdquo;</h5>
					<hr class="visible-xs">
				</div>
				<div class="col-md-5 col-sm-7">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
					</p>
					
					<p>
						Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
					</p>
					
					<p>
						Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur
					</p>
					<img alt="signature" src="../img/fitness1.png" class="image-small">
				</div>
			</div>
		</div>
	</section>
</section>

<section id="variant-text-11" class="vim" vbp="text,new,new" vbr="Accordion FAQ" icons="new">
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h4 class="mb16">FAQ Title</h4>
                    <p class="lead mb64">
                        Holla @mrareweb if you've got more questions and we'll do our best to answer.
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <ul class="accordion accordion-2 one-open">
                        <li>
                            <div class="title" vht="li">
                                <h4 class="inline-block mb0" vht="li">Is Foundry fully responsive?</h4>
                            </div>
                            <div class="content" vht="li">
                                <p vht="li">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="title" vht="li">
                                <h4 class="inline-block mb0" vht="li">Where can I purchase this template?</h4>
                            </div>
                            <div class="content" vht="li">
                                <p vht="li">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="title" vht="li">
                                <h4 class="inline-block mb0" vht="li">Do I need to be a pro to use this?</h4>
                            </div>
                            <div class="content" vht="li">
                                <p vht="li">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="title" vht="li">
                                <h4 class="inline-block mb0" vht="li">Is it ok if I buy 400 copies?</h4>
                            </div>
                            <div class="content" vht="li">
                                <p vht="li">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                            </div>
                        </li>
                    </ul>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-blog-1" class="vim" vbp="text,blog" vbr="News Article">
    <section class="toggle-bg-mrv">
        <div class="container">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="post-snippet mb64">
                        <img class="mb24" alt="Post Image" src="../img/blog-single.jpg">
                        <div class="post-title">
                            <span class="label">23 Sep</span>
                            <h4 class="inline-block">A simple image post for starters</h4>
                        </div>
                        <ul class="post-meta">
                            <li>
                                <i class="ti-user"></i>
                                <span>Written by
                                    <a href="#">Craig Garner</a>
                                </span>
                            </li>
                            <li>
                                <i class="ti-tag"></i>
                                <span>Tagged as
                                    <a href="#">Lifestyle</a>
                                </span>
                            </li>
                        </ul>
                        <hr>
                        <p class="lead">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                        <p>
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
                        </p>
                        <blockquote>
                            It's our challenges and obstacles that give us layers of depth and make us interesting. Are they fun when they happen? No. But they are what make us unique. And that's what I know for sure... I think.
                        </blockquote>
                        <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                        </p>
                        <ul class="bullets">
                            <li>Beatae vitae dicta sunt explicabo</li>
                            <li>Inventore veritatis et quasi architecto</li>
                            <li>Sed do eiusmod tempor incididunt</li>
                            <li>Accusamus et iusto odio dignissimos ducimus</li>
                        </ul>
                    </div>
                    
                    <hr>
                </div>
                
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-blog-2" class="vim" vbp="text,blog" vbr="Disqus Comments">
    <section class="pt0">
        <div class="container">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="disqus-comments" data-shortname="mrarefoundry">
                        <div id="disqus_thread"></div>
                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-image-1" class="vim" vbp="portfolio" vbr="Hover Image Grid">
    <section class="projects toggle-bg-mrv">
        <div class="container">
            <div class="masonry-loader">
                <div class="col-sm-12 text-center">
                    <div class="spinner"></div>
                </div>
            </div>
            <div class="row masonry masonryFlyIn">
                <div class="col-sm-6 masonry-item project" data-filter="People">
                    <div class="image-tile hover-tile text-center" vht="parent">
                        <img alt="image" class="background-image" src="../img/home17.jpg" vht=".project">
                        <div class="hover-state">
                            <a href="#">
                                <h3 class="uppercase mb8">Office Space</h3>
                                <h6 class="uppercase">Technology / Photography</h6>
                            </a>
                        </div>
                    </div>
                    
                </div>
                <div class="col-sm-6 masonry-item project" data-filter="People">
                    <div class="image-tile hover-tile text-center" vht="parent">
                        <img alt="image" class="background-image" src="../img/home20.jpg" vht=".project">
                        <div class="hover-state">
                            <a href="#">
                                <h3 class="uppercase mb8">Terrarium</h3>
                                <h6 class="uppercase">San Jose / CA</h6>
                            </a>
                        </div>
                    </div>
                    
                </div>
                <div class="col-sm-6 masonry-item project" data-filter="People">
                    <div class="image-tile hover-tile text-center" vht="parent">
                        <img alt="image" class="background-image" src="../img/home14.jpg" vht=".project">
                        <div class="hover-state">
                            <a href="#">
                                <h3 class="uppercase mb8">Design Kit</h3>
                                <h6 class="uppercase">Technology / Photography</h6>
                            </a>
                        </div>
                    </div>
                    
                </div>
                <div class="col-sm-6 masonry-item project" data-filter="People">
                    <div class="image-tile hover-tile text-center" vht="parent">
                        <img alt="image" class="background-image" src="../img/home18.jpg" vht=".project">
                        <div class="hover-state">
                            <a href="#">
                                <h3 class="uppercase mb8">Note Taking</h3>
                                <h6 class="uppercase">Productivity</h6>
                            </a>
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-image-2" class="vim" vbp="portfolio" vbr="Wide Grid w/ Filters">
    <section class="projects p0 bg-dark">
        <ul class="filters floating cast-shadow mb0 vog">
        </ul>
        <div class="row masonry-loader fixed-center vog">
            <div class="col-sm-12 text-center">
                <div class="spinner"></div>
            </div>
        </div>
        <div class="row masonry masonryFlyIn">
            <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="People">
                <div class="image-tile inner-title hover-reveal text-center">
                    <a href="#">
                        <img alt="Pic" src="../img/project-single-1.jpg" vht=".project">
                        <div class="title">
                            <h5 class="uppercase mb0">Happy Couple</h5>
                            <span>People / Life</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="Animals">
                <div class="image-tile inner-title hover-reveal text-center">
                    <a href="#">
                        <img alt="Pic" src="../img/project-single-2.jpg" vht=".project">
                        <div class="title">
                            <h5 class="uppercase mb0">Lonely Dog</h5>
                            <span>Animals / Art</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="People">
                <div class="image-tile inner-title hover-reveal text-center">
                    <a href="#">
                        <img alt="Pic" src="../img/project-single-3.jpg" vht=".project">
                        <div class="title">
                            <h5 class="uppercase mb0">Pondering Blonde</h5>
                            <span>People / Life</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="Objects">
                <div class="image-tile inner-title hover-reveal text-center">
                    <a href="#">
                        <img alt="Pic" src="../img/project-single-5.jpg" vht=".project">
                        <div class="title">
                            <h5 class="uppercase mb0">Vintage Typewriter</h5>
                            <span>Objects / Isolated</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="Objects">
                <div class="image-tile inner-title hover-reveal text-center">
                    <a href="#">
                        <img alt="Pic" src="../img/project-single-4.jpg" vht=".project">
                        <div class="title">
                            <h5 class="uppercase mb0">Summer Lovin'</h5>
                            <span>Objects / Food</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="People">
                <div class="image-tile inner-title hover-reveal text-center">
                    <a href="#">
                        <img alt="Pic" src="../img/project-single-6.jpg" vht=".project">
                        <div class="title">
                            <h5 class="uppercase mb0">Thick Fog</h5>
                            <span>People / Life</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        
    </section>
</section>

<section id="variant-image-3" class="vim" vbp="portfolio" vbr="Contained Grid w/ Filters">
    <section class="projects pt48">
        <div class="container vog">
            <div class="row pb24 vog">
                <div class="col-sm-12 text-center vog">
                    <ul class="filters mb0 vog">
                    </ul>
                </div>
            </div>
            
            <div class="row masonry-loader vog">
                <div class="col-sm-12 text-center">
                    <div class="spinner"></div>
                </div>
            </div>
            <div class="row masonry masonryFlyIn">
                <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="People">
                    <div class="image-tile inner-title hover-reveal text-center">
                        <a href="#">
                            <img alt="Pic" src="../img/project-single-1.jpg" vht=".project">
                            <div class="title">
                                <h5 class="uppercase mb0">Happy Couple</h5>
                                <span>People / Life</span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="Animals">
                    <div class="image-tile inner-title hover-reveal text-center">
                        <a href="#">
                            <img alt="Pic" src="../img/project-single-2.jpg" vht=".project">
                            <div class="title">
                                <h5 class="uppercase mb0">Lonely Dog</h5>
                                <span>Animals / Art</span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="People">
                    <div class="image-tile inner-title hover-reveal text-center">
                        <a href="#">
                            <img alt="Pic" src="../img/project-single-3.jpg" vht=".project">
                            <div class="title">
                                <h5 class="uppercase mb0">Pondering Blonde</h5>
                                <span>People / Life</span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="Objects">
                    <div class="image-tile inner-title hover-reveal text-center">
                        <a href="#">
                            <img alt="Pic" src="../img/project-single-5.jpg" vht=".project">
                            <div class="title">
                                <h5 class="uppercase mb0">Vintage Typewriter</h5>
                                <span>Objects / Isolated</span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="Objects">
                    <div class="image-tile inner-title hover-reveal text-center">
                        <a href="#">
                            <img alt="Pic" src="../img/project-single-4.jpg" vht=".project">
                            <div class="title">
                                <h5 class="uppercase mb0">Summer Lovin'</h5>
                                <span>Objects / Food</span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 masonry-item project voh" data-filter="People">
                    <div class="image-tile inner-title hover-reveal text-center">
                        <a href="#">
                            <img alt="Pic" src="../img/project-single-6.jpg" vht=".project">
                            <div class="title">
                                <h5 class="uppercase mb0">Thick Fog</h5>
                                <span>People / Life</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-image-4" class="vim" vbp="portfolio" vbr="Wide Project">
    <section class="image-bg bg-dark parallax overlay pt120 pb120">
        <div class="background-image-holder">
            <img alt="Background Image" class="background-image" src="../img/project-single-3.jpg">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h2 class="uppercase mb8">Project Title</h2>
                    <p class="lead mb40">A brief description of the project.</p>
                    <a class="btn btn-lg btn-white mb0" href="#">Open Project</a>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-contact-1" class="vim" vbp="form" vbr="Contact Form">
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-5">
                    <h4 class="uppercase">Get In Touch</h4>
                    <p>
                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
                    </p>
                    <hr>
                    <p>
                        438 Marine Parade
                        <br> Elwood, Victoria
                        <br> P.O Box 3184
                    </p>
                    <hr>
                    <p>
                        <strong>E:</strong> hello@foundry.net
                        <br>
                        <strong>P:</strong> +614 3948 2726
                        <br>
                    </p>
                </div>
                <div class="col-sm-6 col-md-5 col-md-offset-1">
                    <form class="form-email" data-success="Thanks for your submission, we will be in touch shortly." data-error="Please fill all fields correctly.">
                        <input type="text" class="validate-required" name="name" placeholder="Your Name">
                        <input type="text" class="validate-required validate-email" name="email" placeholder="Email Address">
                        <textarea class="validate-required" name="message" rows="4" placeholder="Message"></textarea>
                        <button type="submit">Send Message</button>
                    </form>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-contact-2" class="vim" vbp="form,map" vbr="Contact Form w/ iframe Map">
    <section class="image-square right">
        <div class="col-md-6 p0 image">
            <div class="map-holder background-image-holder">
                <iframe no-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3149.4086040735224!2d144.976411!3d-37.87412599999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad66889faebddf1%3A0xcc68084b44a30620!2sRiva+St+Kilda!5e0!3m2!1sen!2sau!4v1427779902899"></iframe>
            </div>
        </div>
        <div class="col-md-6 content">
            <form class="form-email" data-success="Thanks for your submission, we will be in touch shortly." data-error="Please fill all fields correctly.">
                <h6 class="uppercase text-center">Send A Message</h6>
                <input type="text" class="validate-required" name="name" placeholder="Your Name">
                <input type="text" class="validate-required validate-email" name="email" placeholder="Email Address">
                <textarea class="validate-required" name="message" rows="4" placeholder="Message"></textarea>
                <button type="submit">Send Message</button>
            </form>
        </div>
    </section>
</section>

<section id="variant-contact-4" class="vim" vbp="form,map" vbr="Contact Form w/ Styled Map">
	<section class="image-square right">
		<div class="col-md-6 p0 image">
			<div class="map-canvas" data-address="Melbourne, Victoria, Australia" data-map-zoom="12"></div>
		</div>
		<div class="col-md-6 content">
			<form class="form-email" data-success="Thanks for your submission, we will be in touch shortly." data-error="Please fill all fields correctly.">
				<h6 class="uppercase text-center">Send A Message</h6>
				<input type="text" class="validate-required" name="name" placeholder="Your Name">
				<input type="text" class="validate-required validate-email" name="email" placeholder="Email Address">
				<textarea class="validate-required" name="message" rows="4" placeholder="Message"></textarea>
				<button type="submit">Send Message</button>
			</form>
		</div>
	</section>
</section>

<section id="variant-contact-3" class="vim" vbp="map" vbr="Fullwidth iframe Map">
    <section class="p0">
        <div class="map-holder pt180 pb180">
            <iframe no-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3149.4086040735224!2d144.976411!3d-37.87412599999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad66889faebddf1%3A0xcc68084b44a30620!2sRiva+St+Kilda!5e0!3m2!1sen!2sau!4v1427779902899"></iframe>
        </div>
    </section>
</section>

<section id="variant-contact-5" class="vim" vbp="map" vbr="Fullwidth Styled Map">
	<section class="pt240 pb240">
			<div class="map-canvas" data-address="Melbourne, Victoria, Australia" data-map-zoom="12"></div>
	</section>
</section>

<section id="variant-contact-6" class="vim" vbp="form" vbr="Reservation Form" icons="new">
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="feature bordered">
                        <h1 class="large uppercase mb64 mb-xs-24">Book A Table</h1>
                        <form class="form-email" data-success="Thanks for your booking, we will be in touch to confirm shortly." data-error="Please fill all fields correctly.">
                            <input type="text" class="validate-required" name="name" placeholder="Name for booking">
                            <input type="text" class="validate-required" name="phone" placeholder="Phone Number">
                            <div class="select-option col-md-6 p0">
                                <i class="ti-angle-down"></i>
                                <select class="validate-required" name="persons">
                                    <option selected="selected" value="">Number of Guests</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                    <option value="4">Four</option>
                                    <option value="5">Five</option>
                                    <option value="6">Six</option>
                                    <option value="7">Seven</option>
                                    <option value="8">Eight</option>
                                    <option value="9">Nine</option>
                                    <option value="10">Ten</option>
                                </select>
                            </div>
                            
                            <div class="select-option col-md-6 p0">
                                <i class="ti-angle-down"></i>
                                <select class="validate-required" name="time">
                                    <option selected="selected" value="">Time</option>
                                    <option value="6pm">6:00pm</option>
                                    <option value="630pm">6:30pm</option>
                                    <option value="7pm">7:00pm</option>
                                    <option value="730pm">7:30pm</option>
                                    <option value="8pm">8:00pm</option>
                                    <option value="830pm">8:30pm</option>
                                    <option value="9pm">9:00pm</option>
                                </select>
                            </div>
                            
                            <input type="text" class="validate-required" name="date" placeholder="Date (DD/MM/YYYY)">
                            <button type="submit">Reserve Table</button>
                        </form>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="map-holder pt160 pb160 mt80 mt-xs-0 mb24">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3149.4086040735224!2d144.976411!3d-37.87412599999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad66889faebddf1%3A0xcc68084b44a30620!2sRiva+St+Kilda!5e0!3m2!1sen!2sau!4v1427779902899"></iframe>
                    </div>
                    <div class="feature bordered">
                        <h4 class="uppercase">Contact Us</h4>
                        <p>
                            428 Marine Parade
                            <br> Elwood VIC 3184
                        </p>
                        <p>
                            <strong>P:</strong> +614837483
                            <br>
                            <strong>E:</strong> eat@foundry.net
                        </p>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-coming-soon-1" class="vim" vbp="form" vbr="Coming Soon">
	<section class="cover fullscreen image-bg overlay">
        <div class="background-image-holder">
            <img alt="image" class="background-image" src="../img/page-coming-soon.jpg">
        </div>
        <div class="container v-align-transform">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1">
                    <div class="feature bordered text-center">
                        <h3 class="uppercase">Check Back Soon</h3>
                        <p>
                            We'll be launching our new site in the coming weeks. Hit the form below to get notified as we launch. Thanks for your interest!
                        </p>
                        <form class="halves form-newsletter" data-success="Thanks for your submission, we will be in touch shortly." data-error="Please fill all fields correctly.">
                            <input class="mb16 validate-required validate-email signup-email-field" type="text" placeholder="Email Address" name="email">
                            <button class="mb16" type="submit">Notify Me</button>
                            <span>*We won't share your email with third parties.</span>
                            <iframe srcdoc="<!-- Begin MailChimp Signup Form --><link href=&quot;https://cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;><style type=&quot;text/css&quot;>    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */</style><div id=&quot;mc_embed_signup&quot;><form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;id=94d040322a&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>    <div id=&quot;mc_embed_signup_scroll&quot;>    <h2>Subscribe to our mailing list</h2><div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span></label>    <input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-FNAME&quot;>First Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;></div><div class=&quot;mc-field-group&quot;>    <label for=&quot;mce-LNAME&quot;>Last Name </label>    <input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;></div>    <div id=&quot;mce-responses&quot; class=&quot;clear&quot;>        <div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div>        <div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div>    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->    <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_94d040322a&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>    <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>    </div></form></div><script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script><!--End mc_embed_signup-->" class="mail-list-form">
                            </iframe>
                        </form>
                    </div>
                </div>
            </div>
            
        </div>
        
    </section>
</section>

<section id="variant-shop-1" class="vim" vbp="shop" vbr="Single Product">
	<section>
		<div class="container">
			<div class="product-single">
				<div class="row mb24 mb-xs-48">
					<div class="col-md-5 col-sm-6">
						<div class="image-slider slider-thumb-controls controls-inside">
							<span class="label">Sale</span>
							<ul class="slides">
								<li>
									<img alt="Image" src="../img/shop-product-4.jpg">
								</li>
								<li>
									<img alt="Image" src="../img/shop-product-4_1.jpg">
								</li>
								<li>
									<img alt="Image" src="../img/shop-product-4_2.jpg">
								</li>
							</ul>
						</div>
						
					</div>
					<div class="col-md-5 col-md-offset-1 col-sm-6">
						<div class="description">
							<h4 class="uppercase">Logan - Sturdy Canvas Black Backpack</h4>
							<div class="mb32 mb-xs-24">
								<span class="number price old-price">$149.95</span>
								<span class="number price">$119.95</span>
							</div>
							<p>
								Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
							</p>
							<ul>
								<li>
									<strong>SKU:</strong> 8660</li>
								<li>
									<strong>COLOURS:</strong> Black, Blue</li>
								<li>
									<strong>SIZES:</strong> XS,S,M,L,XL</li>
							</ul>
						</div>
						<hr class="mb48 mb-xs-24">
						<form class="add-to-cart">
							<input type="text" placeholder="QTY">
							<input type="submit" value="Add To Cart">
						</form>
					</div>
				</div>
				
				<div class="row">
					<div class="col-sm-12">
						<div class="tabbed-content text-tabs">
							<ul class="tabs">
								<li class="active">
									<div class="tab-title">
										<span>Description</span>
									</div>
									<div class="tab-content">
										<p>
											Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.
										</p>
									</div>
								</li>
								<li>
									<div class="tab-title">
										<span>Size Guide</span>
									</div>
									<div class="tab-content">
										<table class="table table-striped table-bordered">
											<thead>
												<tr>
													<th>Size</th>
													<th>Measurement</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<th scope="row">Small</th>
													<td>
														<span class="number">16"</span> Neck /
														<span class="number">8"</span> Sleeve</td>
												</tr>
												<tr>
													<th scope="row">Medium</th>
													<td>
														<span class="number">18"</span> Neck /
														<span class="number">9"</span> Sleeve</td>
												</tr>
												<tr>
													<th scope="row">Large</th>
													<td>
														<span class="number">20"</span> Neck /
														<span class="number">10"</span> Sleeve</td>
												</tr>
											</tbody>
										</table>
									</div>
								</li>
								<li>
									<div class="tab-title">
										<span>Ratings</span>
									</div>
									<div class="tab-content">
										<ul class="ratings">
											<li>
												<div class="user">
													<ul class="list-inline star-rating">
														<li>
															<i class="ti-star"></i>
														</li>
														<li>
															<i class="ti-star"></i>
														</li>
														<li>
															<i class="ti-star"></i>
														</li>
														<li>
															<i class="ti-star"></i>
														</li>
													</ul>
													<span class="bold-h6">Murray Rafferty</span>
													<span class="date number">23/02/2015</span>
												</div>
												<p>
													Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
												</p>
											</li>
											<li>
												<div class="user">
													<ul class="list-inline star-rating">
														<li>
															<i class="ti-star"></i>
														</li>
														<li>
															<i class="ti-star"></i>
														</li>
														<li>
															<i class="ti-star"></i>
														</li>
														<li>
															<i class="ti-star"></i>
														</li>
														<li>
															<i class="ti-star"></i>
														</li>
													</ul>
													<span class="bold-h6">Claire Taurus</span>
													<span class="date number">15/02/2015</span>
												</div>
												<p>
													Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
												</p>
											</li>
										</ul>
										
										<h6 class="uppercase">Leave A Rating</h6>
										<form class="ratings-form">
											<div class="overflow-hidden">
												<input type="text" placeholder="Your Name">
												<input type="text" placeholder="Email Address">
											</div>
											<div class="select-option">
												<i class="ti-angle-down"></i>
												<select>
													<option selected="selected" value="Default">Select A Rating</option>
													<option value="1">1 Star</option>
													<option value="2">2 Stars</option>
													<option value="3">3 Stars</option>
													<option value="4">4 Stars</option>
													<option value="5">5 Stars</option>
												</select>
											</div>
											<textarea placeholder="Comment" rows="3"></textarea>
											<input type="submit" value="Leave Comment">
										</form>
									</div>
								</li>
							</ul>
						</div>
						
					</div>
				</div>
				
			</div>
			
		</div>
		
	</section>
</section>

<section id="variant-nav-1" class="vev" data-vjt="Standard Bar" vbs="nav" vbr="Main Nav">
    
    <script class="options" type="application/json">
        {"options":[
            {
                "type":"toggle",
                "class":"bg-dark",
                "text":"Dark skin",
                "initial":"auto",
                "icon":"brush"
            },
            {
                "type":"toggle",
                "class":"absolute transparent",
                "text":"Transparent",
                "initial":"auto",
                "icon":"brush",
                "refresh":"true"
            }
        ]} 
    </script>

    <a id="top"></a>
    <nav>
        <div class="nav-bar">
            <div class="module left">
                <a href="index.html">
                    <img class="logo logo-light" alt="Foundry" src="../img/logo-light.png">
                    <img class="logo logo-dark" alt="Foundry" src="../img/logo-dark.png">
                </a>
            </div>
            <div class="module widget-handle mobile-toggle right visible-sm visible-xs">
                <i class="ti-menu"></i>
            </div>
            <div class="module-group right">
                <div class="module left">
                    <ul class="menu vjd">
                        <li>
                            <a vht="parent" href="#">Single</a>
                        </li>
                        <li class="has-dropdown">
                            <a href="#" vht="parent">
                                Mega Menu
                            </a>
                            <ul class="mega-menu">
                                <li>
                                    <ul>
                                        <li>
                                            <span class="title" vht="parent">Column 1</span>
                                        </li>
                                        <li>
                                            <a href="#" vht="parent">Single</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>
                                            <span class="title" vht="parent">Column 2</span>
                                        </li>
                                        <li>
                                            <a href="#" vht="parent">Single</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="has-dropdown">
                            <a href="#" vht="parent">
                                Single Dropdown
                            </a>
                            <ul>
                                <li class="has-dropdown">
                                    <a href="#" vht="parent">
                                        Second Level
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="#" vht="parent">
                                                Single
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                
                <div class="module widget-handle language left">
                    <ul class="menu" vht=".module">
                        <li class="has-dropdown" vht=".module">
                            <a href="#" vht=".module">ENG</a>
                            <ul>
                                <li>
                                    <a href="#" vht="parent">French</a>
                                </li>
                                <li>
                                    <a href="#" vht="parent">Deutsch</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>
    </nav>
</section>

<section id="variant-nav-2" class="vev" data-vjt="Standard w/ Info" vbs="nav" vbr="Main Nav">
    
    <script class="options" type="application/json">
        {"options":[
            {
                "type":"toggle",
                "class":"bg-dark",
                "text":"Dark skin",
                "initial":"auto",
                "icon":"brush"
            },
            {
                "type":"toggle",
                "class":"absolute transparent",
                "text":"Transparent",
                "initial":"auto",
                "icon":"brush",
                "refresh":"true"
            }
        ]} 
    </script>

    <a id="top"></a>
    <nav>
        <div class="nav-utility">
            <div class="module left">
                <i class="ti-location-arrow" vht="parent">&nbsp;</i>
                <span class="sub" vht="parent">68 Cardamon Place, Melbourne Vic 3000</span>
            </div>
            <div class="module left">
                <i class="ti-email" vht="parent">&nbsp;</i>
                <span class="sub" vht="parent">hello@foundry.net</span>
            </div>
            <div class="module right">
                <a class="btn btn-sm" href="#">Login</a>
            </div>
        </div>
        <div class="nav-bar">
            <div class="module left">
                <a href="index.html">
                    <img class="logo logo-light" alt="Foundry" src="../img/logo-light.png">
                    <img class="logo logo-dark" alt="Foundry" src="../img/logo-dark.png">
                </a>
            </div>
            <div class="module widget-handle mobile-toggle right visible-sm visible-xs">
                <i class="ti-menu"></i>
            </div>
            <div class="module-group right">
                <div class="module left">
                    <ul class="menu vjd">
                        <li>
                            <a vht="parent" href="#">Single</a>
                        </li>
                        <li class="has-dropdown">
                            <a href="#" vht="parent">
                                Mega Menu
                            </a>
                            <ul class="mega-menu">
                                <li>
                                    <ul>
                                        <li>
                                            <span class="title" vht="parent">Column 1</span>
                                        </li>
                                        <li>
                                            <a href="#" vht="parent">Single</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>
                                            <span class="title" vht="parent">Column 2</span>
                                        </li>
                                        <li>
                                            <a href="#" vht="parent">Single</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="has-dropdown">
                            <a href="#" vht="parent">
                                Single Dropdown
                            </a>
                            <ul>
                                <li class="has-dropdown">
                                    <a href="#" vht="parent">
                                        Second Level
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="#" vht="parent">
                                                Single
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                
                <div class="module widget-handle language left">
                    <ul class="menu" vht=".module">
                        <li class="has-dropdown" vht=".module">
                            <a vht=".module" href="#">ENG</a>
                            <ul>
                                <li>
                                    <a href="#" vht="parent">French</a>
                                </li>
                                <li>
                                    <a href="#" vht="parent">Deutsch</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>
    </nav>
</section>

<section id="variant-nav-3" class="vev" data-vjt="Centered Logo" vbs="nav" vbr="Main Nav">
    
    <script class="options" type="application/json">
        {"options":[
            {
                "type":"toggle",
                "class":"bg-dark",
                "text":"Dark skin",
                "initial":"auto",
                "icon":"brush"
            },
            {
                "type":"toggle",
                "class":"absolute transparent",
                "text":"Transparent",
                "initial":"auto",
                "icon":"brush",
                "refresh":"true"
            }
        ]} 
    </script>

    <nav>

        <div class="nav-bar text-center">
            <div class="col-md-2 col-md-push-5 col-sm-12 text-center">
                <a href="#">
                    <img alt="logo" class="image-xxs" src="../img/logo-dark.png">
                </a>
            </div>

            <div class="col-sm-12 col-md-5 col-md-pull-2 overflow-hidden-xs">
                <ul class="menu inline-block pull-right vjd">
                    <li><a vht="parent" href="#">Single</a></li>
                    <li><a vht="parent" href="#">Dropdown</a>
                        <ul>
                            <li><a vht="parent" href="#">Single</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        
            <div class="col-sm-12 col-md-5 pb-xs-24">
                <ul class="menu vjd">
                    <li><a vht="parent" href="#">Single</a></li>
                    <li><a vht="parent" href="#">Dropdown</a>
                        <ul>
                            <li><a vht="parent" href="#">Single</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <div class="module widget-handle mobile-toggle right visible-sm visible-xs absolute-xs">
            <i class="ti-menu"></i>
        </div>
    </nav>
</section>

<section id="variant-nav-4" class="vev" data-vjt="Offscreen" vbs="nav" vbr="Offscreen">
    
    <script class="options" type="application/json">
        {"options":[
            {
                "type":"toggle",
                "class":"bg-dark",
                "text":"Dark skin",
                "initial":"auto",
                "icon":"brush"
            },
            {
                "type":"toggle",
                "class":"absolute transparent",
                "text":"Transparent",
                "initial":"auto",
                "icon":"brush",
                "refresh":"true"
            }
        ]} 
    </script>

    <nav class="absolute transparent">
            <div class="nav-bar">
                <div class="module left">
                    <a href="index.html">
                        <img class="logo logo-light" alt="Foundry" src="../img/logo-light.png">
                        <img class="logo logo-dark" alt="Foundry" src="../img/logo-dark.png">
                    </a>
                </div>
                <div class="module widget-handle offscreen-toggle right">
                    <i class="ti-menu vog"></i>
                </div>
            </div>
            <div class="offscreen-container bg-dark text-center vog">
                <div class="close-nav vog vjx">
                    <a href="#" class="vog">
                        <i class="ti-close vog"></i>
                    </a>
                </div>
                <div class="v-align-transform text-center">
                    <a href="#"><img alt="Logo" class="image-xs mb40 mb-xs-24" src="../img/logo-light.png"></a>
                    <ul class="mb40 mb-xs-24">
                        <li class="fade-on-hover"><a href="#" vht="li"><h5 class="uppercase mb8" vht="li">Single Link</h5></a></li>
                    </ul>
                    <p class="fade-half">
                        438 Malvern Road<br>
                        Armadale, VIC 3134<br>
                        (03) 38237 37263<br>
                        hello@foundry.net
                    </p>
                    <ul class="list-inline social-list">
                        <li>
                            <a href="#" vht="li">
                                <i class="ti-twitter-alt" vht="li"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" vht="li">
                                <i class="ti-dribbble" vht="li"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" vht="li">
                                <i class="ti-vimeo-alt" vht="li"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
</section>

<section id="variant-nav-5" class="vev" data-vjt="Large Centered" vbs="nav" vbr="Large Centered">
    
    <script class="options" type="application/json">
        {"options":[
            {
                "type":"toggle",
                "class":"bg-dark",
                "text":"Dark skin",
                "initial":"auto",
                "icon":"brush"
            },
            {
                "type":"toggle",
                "class":"absolute transparent",
                "text":"Transparent",
                "initial":"auto",
                "icon":"brush",
                "refresh":"true"
            }
        ]} 
    </script>

    <nav class="nav-centered">
        <div class="nav-utility">
            <div class="module left">
                <i class="ti-location-arrow">&nbsp;</i>
                <span class="sub">68 Cardamon Place, Melbourne Vic 3000</span>
            </div>
            <div class="module left">
                <i class="ti-email">&nbsp;</i>
                <span class="sub">hello@foundry.net</span>
            </div>
            <div class="module right">
                <a class="btn btn-sm" href="#purchase-template">Buy Now</a>
            </div>
        </div>
        <div class="text-center">
             <a href="index.html">
                <img class="logo logo-light" alt="Foundry" src="../img/logo-light.png">
                <img class="logo logo-dark" alt="Foundry" src="../img/logo-dark.png">
            </a>
        </div>
        <div class="nav-bar text-center">
            <div class="module widget-handle mobile-toggle right visible-sm visible-xs">
                <i class="ti-menu"></i>
            </div>
            <div class="module-group text-left">
                <div class="module left">
                    <ul class="menu vjd">
                        <li>
                            <a vht="parent" href="#">Single</a>
                        </li>
                        <li class="has-dropdown">
                            <a href="#" vht="parent">
                                Mega Menu
                            </a>
                            <ul class="mega-menu">
                                <li>
                                    <ul>
                                        <li>
                                            <span class="title" vht="parent">Column 1</span>
                                        </li>
                                        <li>
                                            <a href="#" vht="parent">Single</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>
                                            <span class="title" vht="parent">Column 2</span>
                                        </li>
                                        <li>
                                            <a href="#" vht="parent">Single</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="has-dropdown">
                            <a href="#" vht="parent">
                                Single Dropdown
                            </a>
                            <ul>
                                <li class="has-dropdown">
                                    <a href="#" vht="parent">
                                        Second Level
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="#" vht="parent">
                                                Single
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                
                <div class="module widget-handle language left">
                    <ul class="menu" vht=".module">
                        <li class="has-dropdown" vht=".module">
                            <a vht=".module" href="#">ENG</a>
                            <ul>
                                <li>
                                    <a href="#" vht="parent">French</a>
                                </li>
                                <li>
                                    <a href="#" vht="parent">Deutsch</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>
        </nav>
</section>
		</div>
		
		<div id="vdk" class="vih">
			
<section id="variant-footer-1" class="vim" vbs="footer" vbp="misc" vbr="Widgetized Footer">			
	<footer class="footer-1 bg-dark toggle-bg-mrv">
		<div class="container">
			<div class="row">
				<div class="col-md-3 col-sm-6">
					<img alt="Logo" class="logo" src="../img/logo-light.png">
				</div>
				<div class="col-md-3 col-sm-6">
					<div class="widget">
						<h6 class="title">Recent Posts</h6>
						<hr>
						<ul class="link-list recent-posts">
							<li>
								<a href="#">Hugging pugs is super trendy</a>
								<span class="date">February
									<span class="number">14, 2015</span>
								</span>
							</li>
							<li>
								<a href="#">Spinning vinyl is oh so cool</a>
								<span class="date">February
									<span class="number">9, 2015</span>
								</span>
							</li>
							<li>
								<a href="#">Superior theme design by pros</a>
								<span class="date">January
									<span class="number">27, 2015</span>
								</span>
							</li>
						</ul>
					</div>
					
				</div>
				<div class="col-md-3 col-sm-6">
					<div class="widget">
						<h6 class="title">Latest Updates</h6>
						<hr>
						<div class="twitter-feed">
							<div class="tweets-feed" data-widget-id="492085717044981760">
							</div>
						</div>
					</div>
					
				</div>
				<div class="col-md-3 col-sm-6">
					<div class="widget">
						<h6 class="title">Instagram</h6>
						<hr>
						<div class="instafeed" data-user-name="funsizeco">
							<ul></ul>
						</div>
					</div>
					
				</div>
			</div>
			
			<div class="row">
				<div class="col-sm-6">
					<span class="sub">&copy; Copyright 2015 - Medium Rare</span>
				</div>
				<div class="col-sm-6 text-right">
					<ul class="list-inline social-list">
						<li>
							<a href="#">
								<i vht="li" class="ti-twitter-alt"></i>
							</a>
						</li>
						<li>
							<a href="#">
								<i vht="li" class="ti-facebook"></i>
							</a>
						</li>
						<li>
							<a href="#">
								<i vht="li" class="ti-dribbble"></i>
							</a>
						</li>
						<li>
							<a href="#">
								<i vht="li" class="ti-vimeo-alt"></i>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<a class="btn btn-sm fade-half back-to-top inner-link" href="#top">Top</a>
	</footer>
</section>

<section id="variant-footer-2" class="vim" vbs="footer" vbp="misc" vbr="Slim Footer">			
	<footer class="footer-2 bg-dark toggle-bg-mrv text-center-xs">
		<div class="container">
			<div class="row">
				<div class="col-sm-4">
					<a href="#"><img class="image-xxs fade-half" alt="Pic" src="../img/logo-light.png"></a>
				</div>
			
				<div class="col-sm-4 text-center">
					<span class="fade-half">
						&copy; Copyright 2015 Medium Rare - All Rights Reserved
					</span>
				</div>
			
				<div class="col-sm-4 text-right text-center-xs">
					<ul class="list-inline social-list">
						<li><a href="#"><i vht="li" class="ti-twitter-alt"></i></a></li>
						<li><a href="#"><i vht="li" class="ti-facebook"></i></a></li>
						<li><a href="#"><i vht="li" class="ti-dribbble"></i></a></li>
						<li><a href="#"><i vht="li" class="ti-vimeo-alt"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
	</footer>
</section>

<section id="variant-footer-3" class="vim" vbs="footer" vbp="misc" vbr="Centered Footer">			
	<footer class="footer-2 bg-primary">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center mb64 mb-xs-24">
					<a href="#">
						<img alt="Logo" class="image-xs mb16" src="../img/logo-light.png">
					</a>
					<p class="lead mb48 mb-xs-16">
						1450 Malvern Rd &#8226; Suite 10 2nd Floor<br>
						Glen Iris, Melbourne 3146<br>
						(03) 83726 4782
					</p>
					<ul class="list-inline social-list spread-children">
						<li><a href="#"><i vht="li" class="icon icon-sm ti-twitter-alt"></i></a></li>
						<li><a href="#"><i vht="li" class="icon icon-sm ti-facebook"></i></a></li>
						<li><a href="#"><i vht="li" class="icon icon-sm ti-dribbble"></i></a></li>
						<li><a href="#"><i vht="li" class="icon icon-sm ti-vimeo-alt"></i></a></li>
					</ul>
				</div>
			</div>
		
			<div class="row fade-half">
				<div class="col-sm-4 text-center-xs">
					<span>&copy; Copyright 2015 Medium Rare</span>
				</div>
			
				<div class="col-sm-4 text-center hidden-xs">
					<span>Website Design & Development</span>
				</div>
			
				<div class="col-sm-4 text-right hidden-xs">
					<span>hello@mrare.co</span>
				</div>
			</div>
		</div>
	</footer>
</section>

<section id="variant-footer-4" class="vim" vbs="footer" vbp="misc" vbr="Menu Footer">			
	<footer class="footer-2 bg-dark toggle-bg-mrv pt96 pt-xs-40">
		<div class="container">
			<div class="row mb64 mb-xs-24">
				<div class="col-sm-12">
					<a href="#">
						<img alt="logo" class="image-xxs" src="../img/logo-light.png">
					</a>
				</div>
			</div>
			<div class="row mb64 mb-xs-24">
				<div class="col-md-3 col-sm-4">
					<ul>
						<li><a vht="parent" href="#"><h5 class="uppercase mb16 fade-on-hover">Home</h5></a></li>
						<li><a vht="parent" href="#"><h5 class="uppercase mb16 fade-on-hover">About</h5></a></li>
						<li><a vht="parent" href="#"><h5 class="uppercase mb16 fade-on-hover">Features</h5></a></li>
						<li><a vht="parent" href="#"><h5 class="uppercase mb16 fade-on-hover">Pricing</h5></a></li>
					</ul>
				</div>
			
				<div class="col-md-3 col-sm-4">
					<ul>
						<li><a vht="parent" href="#"><h5 class="uppercase mb16 fade-on-hover">Press</h5></a></li>
						<li><a vht="parent" href="#"><h5 class="uppercase mb16 fade-on-hover">FAQ</h5></a></li>
						<li><a vht="parent" href="#"><h5 class="uppercase mb16 fade-on-hover">Contact</h5></a></li>
					</ul>
				</div>
			
				<div class="col-md-4 col-md-offset-2 col-sm-4">
					<p class="lead">Follow Us</p>
					<ul class="list-inline social-list">
						<li><a href="#"><i vht="li" class="ti-twitter-alt"></i></a></li>
						<li><a href="#"><i vht="li" class="ti-facebook"></i></a></li>
						<li><a href="#"><i vht="li" class="ti-dribbble"></i></a></li>
						<li><a href="#"><i vht="li" class="ti-vimeo-alt"></i></a></li>
					</ul>
				</div>
			</div>
		
			<div class="row fade-half">
				<div class="col-sm-12 text-center">
					<span>&copy; Copyright 2015 Medium Rare - All Rights Reserved</span>
				</div>
			</div>
		</div>
	</footer>
</section>

<section id="variant-footer-5" class="vim" vbs="footer" vbp="misc" vbr="Large Text">			
	<footer class="bg-primary pt96 pb96 pt-xs-48 pb-xs-48">
		<div class="container">
			<div class="row mb64 mb-xs-32">
				<div class="col-md-5 text-right text-left-xs">
					<h2 class="uppercase bold italic">Let's smash<br> your goals<br> together</h2>
				</div>
				<div class="col-md-2 hidden-sm hidden-xs text-center pt48">
					<i class="icon icon-lg ti-bolt display-block"></i>
				</div>
				<div class="col-md-5 col-sm-6">
					<p class="lead">
						Questions, bookings or feedback? Contact me by any<br class="hidden-sm"> of the channels below. I'll respond ASAP!
					</p>
					<h4 class="mb8">P: 0417 374 992</h4>
					<h4 class="mb8">E: train@bendobson.net</h4>
					<h4 class="mb0"><i class="ti-twitter-alt"></i> @bendobson</h4>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center">
					<p class="fade-1-4">Handcrafted by Medium Rare &copy; 2015<br> Built with Variant Page Builder
					<ul class="list-inline social-list mb0">
						<li><a vht="li" href="#"><i vht="li" class="icon icon-xs ti-twitter-alt"></i></a></li>
						<li><a vht="li" href="#"><i vht="li" class="icon icon-xs ti-facebook"></i></a></li>
						<li><a vht="li" href="#"><i vht="li" class="icon icon-xs ti-instagram"></i></a></li>
					</ul>
				</p></div>
			</div>
		</div>
	</footer>
</section>
		</div>

		
		<div id="vdt" class="vih">
			<pre>
				<code id="vji" data-name="Original">
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;[title]&lt;/title&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /&gt;
        &lt;link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" /&gt;
        &lt;link href="css/flexslider.css" rel="stylesheet" type="text/css" media="all" /&gt;
        &lt;link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all" /&gt;
        &lt;link href="css/ytplayer.css" rel="stylesheet" type="text/css" media="all" /&gt;
        &lt;link href="css/theme.css" rel="stylesheet" type="text/css" media="all" /&gt;
        &lt;link href="css/custom.css" rel="stylesheet" type="text/css" media="all" /&gt;
        &lt;link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'&gt;
    &lt;/head&gt;
    &lt;body [optional-body-classes]&gt;
				</code>
			</pre>
		</div>
	
		
		<div id="vfv" class="vih">
			<pre>
				<code id="vif" name="Original">
	&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/flexslider.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/lightbox.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/masonry.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/twitterfetcher.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/spectragram.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/ytplayer.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/countdown.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/smooth-scroll.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/parallax.js"&gt;&lt;/script&gt;
        &lt;script src="js/scripts.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
				</code>
			</pre>
		</div>
		
		<div id="vbn" class="vih"></div>
		
		<div id="vbl" class="vih"></div>
		
		<ul id="vhl" class="vih"></ul>

		<div id="vdp" class="vih"></div>
		
		<script class="vaz" type="application/json">
			{
				"original":
				{
					"name":"Foundry",
					"pathToOriginal":"mixture/public/less/",
					"originalFileName":"theme",
					"colours":["#47b475"]
				},
				"schemes":
				[
					{
						"name":"Nature",
						"colours":["#91A05C"]
					},
					{
						"name":"Nearblack",
						"colours":["#13181D"]
					},
					{
						"name":"Navy",
						"colours":["#282a38"]
					},
					{
						"name":"Gunmetal",
						"colours":["#333347"]
					},
					{
						"name":"Startup",
						"colours":["#5edcd0"]
					},
					{
						"name":"Hyperblue",
						"colours":["#3b3be8"]
					},
					{
						"name":"Purple",
						"colours":["#9037ff"]
					},
					{
						"name":"Red",
						"colours":["#e31d3b"]
					},
					{
						"name":"Fire",
						"colours":["#fc4f4f"]
					},
					{
						"name":"Orange",
						"colours":["#e5692c"]
					},
					{
						"name":"Chipotle",
						"colours":["#f9ad19"]
					},
					{
						"name":"OffYellow",
						"colours":["#e3d820"]
					}
					
				]
			}
		</script>
		
		<script class="vmq" type="application/json">
			{
				"title":"Typography",
				"originalSet":{
					"setName":"Raleway",
					"fonts":[
						{
							"fontName":"Raleway"
						}
					],
					"css":[

						]
				},
				"optionalSets":[
					{
						"setName":"Oswald",
						"fonts":[
							{ 
								"fontName":"Oswald"
							}
						],
						"css":[
								"http://fonts.googleapis.com/css?family=Oswald:300,400,600,700"
							]
					},
					{
						"setName":"Roboto",
						"fonts":[
							{ 
								"fontName":"Roboto"
							}
						],
						"css":[
								"http://fonts.googleapis.com/css?family=Roboto:100,300,400,600,700"
							]
					},
					{
						"setName":"RobotoCondensed",
						"fonts":[
							{ 
								"fontName":"RobotoCondensed"
							}
						],
						"css":[
								"http://fonts.googleapis.com/css?family=Roboto+Condensed:100,300,400,700,700italic"
							]
					},
					{
						"setName":"OpenSans",
						"fonts":[
							{ 
								"fontName":"Opensans"
							}
						],
						"css":[
								"http://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600,700"
							]
					},
					{
						"setName":"Titillium",
						"fonts":[
							{ 
								"fontName":"Titillium"
							}
						],
						"css":[
								"http://fonts.googleapis.com/css?family=Titillium+Web:100,300,400,600,700"
							]
					},
					{
						"setName":"Montserrat",
						"fonts":[
							{ 
								"fontName":"Montserrat"
							}
						],
						"css":[
								"http://fonts.googleapis.com/css?family=Montserrat:100,300,400,600,700"
							]
					},
					{
						"setName":"Dosis",
						"fonts":[
							{ 
								"fontName":"Dosis"
							}
						],
						"css":[
								"http://fonts.googleapis.com/css?family=Dosis:100,300,400,600,700"
							]
					},
					{
						"setName":"Poppins",
						"fonts":[
							{ 
								"fontName":"Poppins"
							}
						],
						"css":[
								"http://fonts.googleapis.com/css?family=Poppins:100,300,400,600,700"
							]
					}
				]
			}

		</script>

		<script id="vkk" type="application/json">
			{ 
				"options":[
					{	
						"type":"toggle",
						"class":"boxed-layout",
						"text":"Boxed Layout",
						"initial":"off",
						"icon":"resize-width"
					},
					{	
						"type":"toggle",
						"class":"btn-rounded",
						"text":"Rounded Buttons",
						"initial":"off",
						"icon":"brush"
					}
				]
			}
		</script>

		<script id="voy" type="application/json">
			{ 
				"options":[
					{	
						"type":"toggle",
						"selector":"section",
						"menu":"utility",
						"submenu":"Section Controls",
						"class":"hidden-xs",
						"text":"Hide On Mobile",
						"initial":"auto",
						"icon":"phone"
					},
					{	
						"type":"toggle",
						"disposableSelector":".toggle-bg-mrv",
						"menu":"utility",
						"submenu":"Section Controls",
						"class":"bg-dark",
						"text":"Dark BG",
						"initial":"auto",
						"icon":"contrast"
					},
					{	
						"type":"toggle",
						"disposableSelector":".toggle-bg-mrv",
						"menu":"utility",
						"submenu":"Section Controls",
						"class":"bg-secondary",
						"text":"Offset BG",
						"initial":"auto",
						"icon":"contrast"
					},
					{	
						"type":"toggle",
						"selector":"h1,h2,h3,h4,h5,h6",
						"menu":"context",
						"class":"uppercase",
						"text":"Uppercase",
						"initial":"auto",
						"icon":"text"
					},
					{	
						"type":"toggle",
						"selector":"h1,h2,h3,h4,h5,h6",
						"menu":"context",
						"class":"bold",
						"text":"Bold",
						"initial":"auto",
						"icon":"bold"
					},
					{	
						"type":"toggle",
						"selector":"h1",
						"menu":"context",
						"class":"large",
						"text":"Enlarge",
						"initial":"auto",
						"icon":"text"
					},
					{	
						"type":"toggle",
						"selector":".feature",
						"menu":"context",
						"class":"boxed",
						"text":"Boxed",
						"initial":"auto",
						"icon":"brush"
					},
					{	
						"type":"toggle",
						"selector":".feature",
						"menu":"context",
						"class":"bordered",
						"text":"Bordered",
						"initial":"auto",
						"icon":"brush"
					},
					{	
						"type":"toggle",
						"selector":".pricing-table",
						"menu":"context",
						"class":"boxed",
						"text":"Boxed",
						"initial":"auto",
						"icon":"brush"
					},
					{	
						"type":"toggle",
						"selector":".pricing-table",
						"menu":"context",
						"class":"emphasis",
						"text":"Highlight",
						"initial":"auto",
						"icon":"brush"
					},
					{	
						"type":"toggle",
						"selector":".image-bg, .cover, section.image-slider",
						"menu":"utility",
						"class":"parallax",
						"text":"Parallax",
						"initial":"auto",
						"icon":"data-transfer-upload"
					},
					{	
						"type":"toggle",
						"selector":".row, div[class*='col-']",
						"menu":"context",
						"class":"text-center",
						"text":"Text Center",
						"initial":"auto",
						"icon":"align-center"
					},
					{	
						"type":"toggle",
						"selector":".btn",
						"menu":"context",
						"class":"btn-filled",
						"text":"Fill Button",
						"initial":"auto",
						"icon":"brush"
					}
				]
			}
		</script>

		<script id="vnd" type="application/json">
			{ 
				"options":[
					{
						"buttonText":"Edit Placeholder",
						"modalTitle":"Edit Placeholder",
						"modalIntro":"Edit the placeholder text for this input. Placeholder text appears before the user has started typing.",
						"modalInputLabel":"Placeholder Text:",
						"selector":"input[type='text'],textarea",
						"attribute":"placeholder",
						"modalInputIcon":"text"
					},
					{
						"buttonText":"Edit Value",
						"modalTitle":"Edit Input Value",
						"modalIntro":"Edit the value for this input. The value is the text that appears on the submit button.",
						"modalInputLabel":"Button Text:",
						"selector":"input[type='submit']",
						"attribute":"value",
						"modalInputIcon":"text"
					},
					{
						"buttonText":"Edit Feed",
						"modalTitle":"Edit Instagram Feed",
						"modalIntro":"Edit the Instagram feed by placing your desired username here.",
						"modalInputLabel":"Username:",
						"selector":".instafeed",
						"attribute":"data-user-name",
						"modalInputIcon":"instagram",
						"sectionControl":"true",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Twitter Widget",
						"modalTitle":"Edit Twitter Widget",
						"modalIntro":"Place your Twitter Widget ID here *See template docs for a detailed explanation on how to obtain your widget ID.",
						"modalInputLabel":"Widget ID:",
						"selector":".tweets-feed",
						"attribute":"data-widget-id",
						"modalInputIcon":"twitter",
						"sectionControl":"true",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Map Embed",
						"modalTitle":"Edit Map Embed",
						"modalIntro":"Copy the iframe embed code from your mapping provider and paste it here.",
						"modalInputLabel":"Embed Code:",
						"selector":".map-holder iframe",
						"attribute":"no-src",
						"modalInputIcon":"map-marker",
						"sectionControl":"true"
					},
					{
						"buttonText":"Edit Media Embed",
						"modalTitle":"Edit Media Embed",
						"modalIntro":"Copy the iframe embed code from your media provider and paste it here.",
						"modalInputLabel":"Embed Code:",
						"selector":".embed-video-container > iframe",
						"attribute":"no-src",
						"modalInputIcon":"video",
						"sectionControl":"true"
					},
					{
						"buttonText":"Edit Newsletter Embed",
						"modalTitle":"Edit Newsletter Embed",
						"modalIntro":"Copy the form code from Mailchimp or Campaign Monitor here.  Use the `Classic` form in Mailchimp. Use the standard form in Campaign Monitor.  Leaving this empty will default to email form behaviour (sent through mail.php)",
						"modalInputLabel":"Form Embed Code:",
						"selector":"form.form-newsletter iframe.mail-list-form",
						"attribute":"srcdoc",
						"modalInputIcon":"envelope-closed",
						"sectionControl":"true"
					},
					{
						"buttonText":"Edit Form Success Message",
						"modalTitle":"Edit Form Success Message",
						"modalIntro":"Provide a message to appear when the form is submitted successfully.",
						"modalInputLabel":"Form Success Message:",
						"selector":"form[data-success]",
						"attribute":"data-success",
						"modalInputIcon":"circle-check",
						"sectionControl":"true"
					},
					{
						"buttonText":"Edit Form Error Message",
						"modalTitle":"Edit Form Error Message",
						"modalIntro":"Provide a message to appear when the form validation is rejected.",
						"modalInputLabel":"Form Error Message:",
						"selector":"form[data-error]",
						"attribute":"data-error",
						"modalInputIcon":"circle-x",
						"sectionControl":"true"
					},
					{
						"buttonText":"Edit Form Redirect Address",
						"modalTitle":"Edit Form Redirect Address",
						"modalIntro":"The address to redirect after successful form submission.   Leave blank for no redirection.",
						"modalInputLabel":"Redirect Address:",
						"selector":"form.form-email, form.form-newsletter",
						"attribute":"success-redirect",
						"modalInputIcon":"external-link",
						"sectionControl":"true"
					},
					{
						"buttonText":"Edit Countdown Date",
						"modalTitle":"Edit Countdown Date",
						"modalIntro":"Date of countdown in YYYY/DD/MM format.",
						"modalInputLabel":"Date:",
						"selector":".countdown",
						"attribute":"data-date",
						"modalInputIcon":"clock",
						"sectionControl":"true",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Progress Amount",
						"modalTitle":"Edit Progress Amount",
						"modalIntro":"Change the value of the progress bar (out of 100)",
						"modalInputLabel":"Value:",
						"selector":".progress-bar",
						"attribute":"data-progress",
						"modalInputIcon":"dial",
						"sectionControl":"false",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Project Category",
						"modalTitle":"Edit Project Category",
						"modalIntro":"Change the category of this project",
						"modalInputLabel":"Category:",
						"selector":".project",
						"attribute":"data-filter",
						"modalInputIcon":"tags",
						"sectionControl":"false",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Gallery Title",
						"modalTitle":"Edit Gallery Title",
						"modalIntro":"Title for Lightbox Gallery",
						"modalInputLabel":"Gallery Title:",
						"selector":".lightbox-grid",
						"attribute":"data-gallery-title",
						"modalInputIcon":"tag",
						"sectionControl":"true",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Disqus Shortname",
						"modalTitle":"Edit Disqus Shortname",
						"modalIntro":"Shortname for Disqus Comments. Retrieve your site's shortname from the 'Settings' area in your Disqus dashboard. See the template documentation for greater detail.",
						"modalInputLabel":"Shortname:",
						"selector":".disqus-comments",
						"attribute":"data-shortname",
						"modalInputIcon":"tag",
						"sectionControl":"true",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Google Maps API Key",
						"modalTitle":"Google Maps API Key",
						"modalIntro":"Get your Maps API key from Google and paste it here to allow styled maps in your page.",
						"modalInputLabel":"API Key:",
						"selector":"div.map-canvas",
						"attribute":"data-maps-api-key",
						"modalInputIcon":"key",
						"sectionControl":"true",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Map Address",
						"modalTitle":"Map Address",
						"modalIntro":"Provide a specific address for Google Maps to center the map.",
						"modalInputLabel":"Full Address:",
						"selector":"div.map-canvas",
						"attribute":"data-address",
						"modalInputIcon":"map-marker",
						"sectionControl":"true",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Map Style",
						"modalTitle":"Map Style",
						"modalIntro":"Copy JSON style code from https://snazzymaps.com/ or http://goo.gl/GJEDaO and paste below.",
						"modalInputLabel":"Maps Style JSON:",
						"selector":"div.map-canvas",
						"attribute":"data-map-style",
						"modalInputIcon":"brush",
						"sectionControl":"true",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Map Zoom Level",
						"modalTitle":"Map Zoom Level",
						"modalIntro":"Provide a zoom level (number) between 1 and 18 where 18 is closer and 1 is further away.",
						"modalInputLabel":"Zoom level:",
						"selector":"div.map-canvas",
						"attribute":"data-map-zoom",
						"modalInputIcon":"zoom-in",
						"sectionControl":"true",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Video Provider",
						"modalTitle":"Edit Video Provider",
						"modalIntro":"Specify either 'youtube' or 'vimeo' as your media provider",
						"modalInputLabel":"Video Provider:",
						"selector":"iframe[data-provider]",
						"attribute":"data-provider",
						"modalInputIcon":"media-play",
						"sectionControl":"true",
						"refresh":"true"
					},
					{
						"buttonText":"Edit Video ID",
						"modalTitle":"Edit Video ID",
						"modalIntro":"Specify the ID of the video as obtained from the URL (see docs for a more detailed guide)",
						"modalInputLabel":"Video ID:",
						"selector":"iframe[data-video-id]",
						"attribute":"data-video-id",
						"modalInputIcon":"video",
						"sectionControl":"true",
						"refresh":"true"
					}
				]
			}
		</script>

		<script id="voi" type="application/json">
			{
				"iconPacks":[
					{
						"name":"Themify",
						"url":"http://goo.gl/I70F4d",
						"headString":"&lt;link href=&quot;css/themify-icons.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; /&gt;",
						"iconPrefix":"ti-",
						"iconClass":"ti",
						"icons":["ti-wand","ti-volume","ti-user","ti-unlock","ti-unlink","ti-trash","ti-thought","ti-target","ti-tag","ti-tablet","ti-star","ti-spray","ti-signal","ti-shopping-cart","ti-shopping-cart-full","ti-settings","ti-search","ti-zoom-in","ti-zoom-out","ti-cut","ti-ruler","ti-ruler-pencil","ti-ruler-alt","ti-bookmark","ti-bookmark-alt","ti-reload","ti-plus","ti-pin","ti-pencil","ti-pencil-alt","ti-paint-roller","ti-paint-bucket","ti-na","ti-mobile","ti-minus","ti-medall","ti-medall-alt","ti-marker","ti-marker-alt","ti-arrow-up","ti-arrow-right","ti-arrow-left","ti-arrow-down","ti-lock","ti-location-arrow","ti-link","ti-layout","ti-layers","ti-layers-alt","ti-key","ti-import","ti-image","ti-heart","ti-heart-broken","ti-hand-stop","ti-hand-open","ti-hand-drag","ti-folder","ti-flag","ti-flag-alt","ti-flag-alt-2","ti-eye","ti-export","ti-exchange-vertical","ti-desktop","ti-cup","ti-crown","ti-comments","ti-comment","ti-comment-alt","ti-close","ti-clip","ti-angle-up","ti-angle-right","ti-angle-left","ti-angle-down","ti-check","ti-check-box","ti-camera","ti-announcement","ti-brush","ti-briefcase","ti-bolt","ti-bolt-alt","ti-blackboard","ti-bag","ti-move","ti-arrows-vertical","ti-arrows-horizontal","ti-fullscreen","ti-arrow-top-right","ti-arrow-top-left","ti-arrow-circle-up","ti-arrow-circle-right","ti-arrow-circle-left","ti-arrow-circle-down","ti-angle-double-up","ti-angle-double-right","ti-angle-double-left","ti-angle-double-down","ti-zip","ti-world","ti-wheelchair","ti-view-list","ti-view-list-alt","ti-view-grid","ti-uppercase","ti-upload","ti-underline","ti-truck","ti-timer","ti-ticket","ti-thumb-up","ti-thumb-down","ti-text","ti-stats-up","ti-stats-down","ti-split-v","ti-split-h","ti-smallcap","ti-shine","ti-shift-right","ti-shift-left","ti-shield","ti-notepad","ti-server","ti-quote-right","ti-quote-left","ti-pulse","ti-printer","ti-power-off","ti-plug","ti-pie-chart","ti-paragraph","ti-panel","ti-package","ti-music","ti-music-alt","ti-mouse","ti-mouse-alt","ti-money","ti-microphone","ti-menu","ti-menu-alt","ti-map","ti-map-alt","ti-loop","ti-location-pin","ti-list","ti-light-bulb","ti-Italic","ti-info","ti-infinite","ti-id-badge","ti-hummer","ti-home","ti-help","ti-headphone","ti-harddrives","ti-harddrive","ti-gift","ti-game","ti-filter","ti-files","ti-file","ti-eraser","ti-envelope","ti-download","ti-direction","ti-direction-alt","ti-dashboard","ti-control-stop","ti-control-shuffle","ti-control-play","ti-control-pause","ti-control-forward","ti-control-backward","ti-cloud","ti-cloud-up","ti-cloud-down","ti-clipboard","ti-car","ti-calendar","ti-book","ti-bell","ti-basketball","ti-bar-chart","ti-bar-chart-alt","ti-back-right","ti-back-left","ti-arrows-corner","ti-archive","ti-anchor","ti-align-right","ti-align-left","ti-align-justify","ti-align-center","ti-alert","ti-alarm-clock","ti-agenda","ti-write","ti-window","ti-widgetized","ti-widget","ti-widget-alt","ti-wallet","ti-video-clapper","ti-video-camera","ti-vector","ti-themify-logo","ti-themify-favicon","ti-themify-favicon-alt","ti-support","ti-stamp","ti-split-v-alt","ti-slice","ti-shortcode","ti-shift-right-alt","ti-shift-left-alt","ti-ruler-alt-2","ti-receipt","ti-pin2","ti-pin-alt","ti-pencil-alt2","ti-palette","ti-more","ti-more-alt","ti-microphone-alt","ti-magnet","ti-line-double","ti-line-dotted","ti-line-dashed","ti-layout-width-full","ti-layout-width-default","ti-layout-width-default-alt","ti-layout-tab","ti-layout-tab-window","ti-layout-tab-v","ti-layout-tab-min","ti-layout-slider","ti-layout-slider-alt","ti-layout-sidebar-right","ti-layout-sidebar-none","ti-layout-sidebar-left","ti-layout-placeholder","ti-layout-menu","ti-layout-menu-v","ti-layout-menu-separated","ti-layout-menu-full","ti-layout-media-right-alt","ti-layout-media-right","ti-layout-media-overlay","ti-layout-media-overlay-alt","ti-layout-media-overlay-alt-2","ti-layout-media-left-alt","ti-layout-media-left","ti-layout-media-center-alt","ti-layout-media-center","ti-layout-list-thumb","ti-layout-list-thumb-alt","ti-layout-list-post","ti-layout-list-large-image","ti-layout-line-solid","ti-layout-grid4","ti-layout-grid3","ti-layout-grid2","ti-layout-grid2-thumb","ti-layout-cta-right","ti-layout-cta-left","ti-layout-cta-center","ti-layout-cta-btn-right","ti-layout-cta-btn-left","ti-layout-column4","ti-layout-column3","ti-layout-column2","ti-layout-accordion-separated","ti-layout-accordion-merged","ti-layout-accordion-list","ti-ink-pen","ti-info-alt","ti-help-alt","ti-headphone-alt","ti-hand-point-up","ti-hand-point-right","ti-hand-point-left","ti-hand-point-down","ti-gallery","ti-face-smile","ti-face-sad","ti-credit-card","ti-control-skip-forward","ti-control-skip-backward","ti-control-record","ti-control-eject","ti-comments-smiley","ti-brush-alt","ti-youtube","ti-vimeo","ti-twitter","ti-time","ti-tumblr","ti-skype","ti-share","ti-share-alt","ti-rocket","ti-pinterest","ti-new-window","ti-microsoft","ti-list-ol","ti-linkedin","ti-layout-sidebar-2","ti-layout-grid4-alt","ti-layout-grid3-alt","ti-layout-grid2-alt","ti-layout-column4-alt","ti-layout-column3-alt","ti-layout-column2-alt","ti-instagram","ti-google","ti-github","ti-flickr","ti-facebook","ti-dropbox","ti-dribbble","ti-apple","ti-android","ti-save","ti-save-alt","ti-yahoo","ti-wordpress","ti-vimeo-alt","ti-twitter-alt","ti-tumblr-alt","ti-trello","ti-stack-overflow","ti-soundcloud","ti-sharethis","ti-sharethis-alt","ti-reddit","ti-pinterest-alt","ti-microsoft-alt","ti-linux","ti-jsfiddle","ti-joomla","ti-html5","ti-flickr-alt","ti-email","ti-drupal","ti-dropbox-alt","ti-css3","ti-rss","ti-rss-alt"],
						"requiredBy":"[data-bullet*=\"ti-\"],[class*=\"modal\"]"
					},
					{
						"name":"Font Awesome",
						"url":"http://goo.gl/oFgIWn",
						"headString":"&lt;link href=&quot;css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;",
						"iconPrefix":"fa-",
						"iconClass":"fa",
						"icons":["fa-glass","fa-music","fa-search","fa-envelope-o","fa-heart","fa-star","fa-star-o","fa-user","fa-film","fa-th-large","fa-th","fa-th-list","fa-check","fa-remove","fa-close","fa-times","fa-search-plus","fa-search-minus","fa-power-off","fa-signal","fa-gear","fa-cog","fa-trash-o","fa-home","fa-file-o","fa-clock-o","fa-road","fa-download","fa-arrow-circle-o-down","fa-arrow-circle-o-up","fa-inbox","fa-play-circle-o","fa-rotate-right","fa-repeat","fa-refresh","fa-list-alt","fa-lock","fa-flag","fa-headphones","fa-volume-off","fa-volume-down","fa-volume-up","fa-qrcode","fa-barcode","fa-tag","fa-tags","fa-book","fa-bookmark","fa-print","fa-camera","fa-font","fa-bold","fa-italic","fa-text-height","fa-text-width","fa-align-left","fa-align-center","fa-align-right","fa-align-justify","fa-list","fa-dedent","fa-outdent","fa-indent","fa-video-camera","fa-photo","fa-image","fa-picture-o","fa-pencil","fa-map-marker","fa-adjust","fa-tint","fa-edit","fa-pencil-square-o","fa-share-square-o","fa-check-square-o","fa-arrows","fa-step-backward","fa-fast-backward","fa-backward","fa-play","fa-pause","fa-stop","fa-forward","fa-fast-forward","fa-step-forward","fa-eject","fa-chevron-left","fa-chevron-right","fa-plus-circle","fa-minus-circle","fa-times-circle","fa-check-circle","fa-question-circle","fa-info-circle","fa-crosshairs","fa-times-circle-o","fa-check-circle-o","fa-ban","fa-arrow-left","fa-arrow-right","fa-arrow-up","fa-arrow-down","fa-mail-forward","fa-share","fa-expand","fa-compress","fa-plus","fa-minus","fa-asterisk","fa-exclamation-circle","fa-gift","fa-leaf","fa-fire","fa-eye","fa-eye-slash","fa-warning","fa-exclamation-triangle","fa-plane","fa-calendar","fa-random","fa-comment","fa-magnet","fa-chevron-up","fa-chevron-down","fa-retweet","fa-shopping-cart","fa-folder","fa-folder-open","fa-arrows-v","fa-arrows-h","fa-bar-chart-o","fa-bar-chart","fa-twitter-square","fa-facebook-square","fa-camera-retro","fa-key","fa-gears","fa-cogs","fa-comments","fa-thumbs-o-up","fa-thumbs-o-down","fa-star-half","fa-heart-o","fa-sign-out","fa-linkedin-square","fa-thumb-tack","fa-external-link","fa-sign-in","fa-trophy","fa-github-square","fa-upload","fa-lemon-o","fa-phone","fa-square-o","fa-bookmark-o","fa-phone-square","fa-twitter","fa-facebook-f","fa-facebook","fa-github","fa-unlock","fa-credit-card","fa-rss","fa-hdd-o","fa-bullhorn","fa-bell","fa-certificate","fa-hand-o-right","fa-hand-o-left","fa-hand-o-up","fa-hand-o-down","fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-up","fa-arrow-circle-down","fa-globe","fa-wrench","fa-tasks","fa-filter","fa-briefcase","fa-arrows-alt","fa-group","fa-users","fa-chain","fa-link","fa-cloud","fa-flask","fa-cut","fa-scissors","fa-copy","fa-files-o","fa-paperclip","fa-save","fa-floppy-o","fa-square","fa-navicon","fa-reorder","fa-bars","fa-list-ul","fa-list-ol","fa-strikethrough","fa-underline","fa-table","fa-magic","fa-truck","fa-pinterest","fa-pinterest-square","fa-google-plus-square","fa-google-plus","fa-money","fa-caret-down","fa-caret-up","fa-caret-left","fa-caret-right","fa-columns","fa-unsorted","fa-sort","fa-sort-down","fa-sort-desc","fa-sort-up","fa-sort-asc","fa-envelope","fa-linkedin","fa-rotate-left","fa-undo","fa-legal","fa-gavel","fa-dashboard","fa-tachometer","fa-comment-o","fa-comments-o","fa-flash","fa-bolt","fa-sitemap","fa-umbrella","fa-paste","fa-clipboard","fa-lightbulb-o","fa-exchange","fa-cloud-download","fa-cloud-upload","fa-user-md","fa-stethoscope","fa-suitcase","fa-bell-o","fa-coffee","fa-cutlery","fa-file-text-o","fa-building-o","fa-hospital-o","fa-ambulance","fa-medkit","fa-fighter-jet","fa-beer","fa-h-square","fa-plus-square","fa-angle-double-left","fa-angle-double-right","fa-angle-double-up","fa-angle-double-down","fa-angle-left","fa-angle-right","fa-angle-up","fa-angle-down","fa-desktop","fa-laptop","fa-tablet","fa-mobile-phone","fa-mobile","fa-circle-o","fa-quote-left","fa-quote-right","fa-spinner","fa-circle","fa-mail-reply","fa-reply","fa-github-alt","fa-folder-o","fa-folder-open-o","fa-smile-o","fa-frown-o","fa-meh-o","fa-gamepad","fa-keyboard-o","fa-flag-o","fa-flag-checkered","fa-terminal","fa-code","fa-mail-reply-all","fa-reply-all","fa-star-half-empty","fa-star-half-full","fa-star-half-o","fa-location-arrow","fa-crop","fa-code-fork","fa-unlink","fa-chain-broken","fa-question","fa-info","fa-exclamation","fa-superscript","fa-subscript","fa-eraser","fa-puzzle-piece","fa-microphone","fa-microphone-slash","fa-shield","fa-calendar-o","fa-fire-extinguisher","fa-rocket","fa-maxcdn","fa-chevron-circle-left","fa-chevron-circle-right","fa-chevron-circle-up","fa-chevron-circle-down","fa-html5","fa-css3","fa-anchor","fa-unlock-alt","fa-bullseye","fa-ellipsis-h","fa-ellipsis-v","fa-rss-square","fa-play-circle","fa-ticket","fa-minus-square","fa-minus-square-o","fa-level-up","fa-level-down","fa-check-square","fa-pencil-square","fa-external-link-square","fa-share-square","fa-compass","fa-toggle-down","fa-caret-square-o-down","fa-toggle-up","fa-caret-square-o-up","fa-toggle-right","fa-caret-square-o-right","fa-euro","fa-eur","fa-gbp","fa-dollar","fa-usd","fa-rupee","fa-inr","fa-cny","fa-rmb","fa-yen","fa-jpy","fa-ruble","fa-rouble","fa-rub","fa-won","fa-krw","fa-bitcoin","fa-btc","fa-file","fa-file-text","fa-sort-alpha-asc","fa-sort-alpha-desc","fa-sort-amount-asc","fa-sort-amount-desc","fa-sort-numeric-asc","fa-sort-numeric-desc","fa-thumbs-up","fa-thumbs-down","fa-youtube-square","fa-youtube","fa-xing","fa-xing-square","fa-youtube-play","fa-dropbox","fa-stack-overflow","fa-instagram","fa-flickr","fa-adn","fa-bitbucket","fa-bitbucket-square","fa-tumblr","fa-tumblr-square","fa-long-arrow-down","fa-long-arrow-up","fa-long-arrow-left","fa-long-arrow-right","fa-apple","fa-windows","fa-android","fa-linux","fa-dribbble","fa-skype","fa-foursquare","fa-trello","fa-female","fa-male","fa-gittip","fa-gratipay","fa-sun-o","fa-moon-o","fa-archive","fa-bug","fa-vk","fa-weibo","fa-renren","fa-pagelines","fa-stack-exchange","fa-arrow-circle-o-right","fa-arrow-circle-o-left","fa-toggle-left","fa-caret-square-o-left","fa-dot-circle-o","fa-wheelchair","fa-vimeo-square","fa-turkish-lira","fa-try","fa-plus-square-o","fa-space-shuttle","fa-slack","fa-envelope-square","fa-wordpress","fa-openid","fa-institution","fa-bank","fa-university","fa-mortar-board","fa-graduation-cap","fa-yahoo","fa-google","fa-reddit","fa-reddit-square","fa-stumbleupon-circle","fa-stumbleupon","fa-delicious","fa-digg","fa-pied-piper","fa-pied-piper-alt","fa-drupal","fa-joomla","fa-language","fa-fax","fa-building","fa-child","fa-paw","fa-spoon","fa-cube","fa-cubes","fa-behance","fa-behance-square","fa-steam","fa-steam-square","fa-recycle","fa-automobile","fa-car","fa-cab","fa-taxi","fa-tree","fa-spotify","fa-deviantart","fa-soundcloud","fa-database","fa-file-pdf-o","fa-file-word-o","fa-file-excel-o","fa-file-powerpoint-o","fa-file-photo-o","fa-file-picture-o","fa-file-image-o","fa-file-zip-o","fa-file-archive-o","fa-file-sound-o","fa-file-audio-o","fa-file-movie-o","fa-file-video-o","fa-file-code-o","fa-vine","fa-codepen","fa-jsfiddle","fa-life-bouy","fa-life-buoy","fa-life-saver","fa-support","fa-life-ring","fa-circle-o-notch","fa-ra","fa-rebel","fa-ge","fa-empire","fa-git-square","fa-git","fa-hacker-news","fa-tencent-weibo","fa-qq","fa-wechat","fa-weixin","fa-send","fa-paper-plane","fa-send-o","fa-paper-plane-o","fa-history","fa-genderless","fa-circle-thin","fa-header","fa-paragraph","fa-sliders","fa-share-alt","fa-share-alt-square","fa-bomb","fa-soccer-ball-o","fa-futbol-o","fa-tty","fa-binoculars","fa-plug","fa-slideshare","fa-twitch","fa-yelp","fa-newspaper-o","fa-wifi","fa-calculator","fa-paypal","fa-google-wallet","fa-cc-visa","fa-cc-mastercard","fa-cc-discover","fa-cc-amex","fa-cc-paypal","fa-cc-stripe","fa-bell-slash","fa-bell-slash-o","fa-trash","fa-copyright","fa-at","fa-eyedropper","fa-paint-brush","fa-birthday-cake","fa-area-chart","fa-pie-chart","fa-line-chart","fa-lastfm","fa-lastfm-square","fa-toggle-off","fa-toggle-on","fa-bicycle","fa-bus","fa-ioxhost","fa-angellist","fa-cc","fa-shekel","fa-sheqel","fa-ils","fa-meanpath","fa-buysellads","fa-connectdevelop","fa-dashcube","fa-forumbee","fa-leanpub","fa-sellsy","fa-shirtsinbulk","fa-simplybuilt","fa-skyatlas","fa-cart-plus","fa-cart-arrow-down","fa-diamond","fa-ship","fa-user-secret","fa-motorcycle","fa-street-view","fa-heartbeat","fa-venus","fa-mars","fa-mercury","fa-transgender","fa-transgender-alt","fa-venus-double","fa-mars-double","fa-venus-mars","fa-mars-stroke","fa-mars-stroke-v","fa-mars-stroke-h","fa-neuter","fa-facebook-official","fa-pinterest-p","fa-whatsapp","fa-server","fa-user-plus","fa-user-times","fa-hotel","fa-bed","fa-viacoin","fa-train","fa-subway","fa-medium"],
						"requiredBy":"[data-bullet*=\"fa-\"]"
					},
					{
						"name":"ET Line",
						"url":"http://goo.gl/fqxVRW",
						"headString":"&lt;link href=&quot;css/et-line-icons.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;",
						"iconPrefix":"et-line-",
						"iconClass":"",
						"icons":["et-line-mobile","et-line-laptop","et-line-desktop","et-line-tablet","et-line-phone","et-line-document","et-line-documents","et-line-search","et-line-clipboard","et-line-newspaper","et-line-notebook","et-line-book-open","et-line-browser","et-line-calendar","et-line-presentation","et-line-picture","et-line-pictures","et-line-video","et-line-camera","et-line-printer","et-line-toolbox","et-line-briefcase","et-line-wallet","et-line-gift","et-line-bargraph","et-line-grid","et-line-expand","et-line-focus","et-line-edit","et-line-adjustments","et-line-ribbon","et-line-hourglass","et-line-lock","et-line-megaphone","et-line-shield","et-line-trophy","et-line-flag","et-line-map","et-line-puzzle","et-line-basket","et-line-envelope","et-line-streetsign","et-line-telescope","et-line-gears","et-line-key","et-line-paperclip","et-line-attachment","et-line-pricetags","et-line-lightbulb","et-line-layers","et-line-pencil","et-line-tools","et-line-tools-2","et-line-scissors","et-line-paintbrush","et-line-magnifying-glass","et-line-circle-compass","et-line-linegraph","et-line-mic","et-line-strategy","et-line-beaker","et-line-caution","et-line-recycle","et-line-anchor","et-line-profile-male","et-line-profile-female","et-line-bike","et-line-wine","et-line-hotairballoon","et-line-globe","et-line-genius","et-line-map-pin","et-line-dial","et-line-chat","et-line-heart","et-line-cloud","et-line-upload","et-line-download","et-line-target","et-line-hazardous","et-line-piechart","et-line-speedometer","et-line-global","et-line-compass","et-line-lifesaver","et-line-clock","et-line-aperture","et-line-quote","et-line-scope","et-line-alarmclock","et-line-refresh","et-line-happy","et-line-sad","et-line-facebook","et-line-twitter","et-line-googleplus","et-line-rss","et-line-tumblr","et-line-linkedin","et-line-dribbble"],
						"requiredBy":"[data-bullet*=\"et-line-\"]"
					},
					{
						"name":"Pixeden 7 Stroke",
						"url":"http://goo.gl/lcxupT",
						"headString":"&lt;link href=&quot;css/pe-icon-7-stroke.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;",
						"iconPrefix":"pe-7s-",
						"iconClass":"",
						"icons":["pe-7s-album","pe-7s-arc","pe-7s-back-2","pe-7s-bandaid","pe-7s-car","pe-7s-diamond","pe-7s-door-lock","pe-7s-eyedropper","pe-7s-female","pe-7s-gym","pe-7s-hammer","pe-7s-headphones","pe-7s-helm","pe-7s-hourglass","pe-7s-leaf","pe-7s-magic-wand","pe-7s-male","pe-7s-map-2","pe-7s-next-2","pe-7s-paint-bucket","pe-7s-pendrive","pe-7s-photo","pe-7s-piggy","pe-7s-plugin","pe-7s-refresh-2","pe-7s-rocket","pe-7s-settings","pe-7s-shield","pe-7s-smile","pe-7s-usb","pe-7s-vector","pe-7s-wine","pe-7s-cloud-upload","pe-7s-cash","pe-7s-close","pe-7s-bluetooth","pe-7s-cloud-download","pe-7s-way","pe-7s-close-circle","pe-7s-id","pe-7s-angle-up","pe-7s-wristwatch","pe-7s-angle-up-circle","pe-7s-world","pe-7s-angle-right","pe-7s-volume","pe-7s-angle-right-circle","pe-7s-users","pe-7s-angle-left","pe-7s-user-female","pe-7s-angle-left-circle","pe-7s-up-arrow","pe-7s-angle-down","pe-7s-switch","pe-7s-angle-down-circle","pe-7s-scissors","pe-7s-wallet","pe-7s-safe","pe-7s-volume2","pe-7s-volume1","pe-7s-voicemail","pe-7s-video","pe-7s-user","pe-7s-upload","pe-7s-unlock","pe-7s-umbrella","pe-7s-trash","pe-7s-tools","pe-7s-timer","pe-7s-ticket","pe-7s-target","pe-7s-sun","pe-7s-study","pe-7s-stopwatch","pe-7s-star","pe-7s-speaker","pe-7s-signal","pe-7s-shuffle","pe-7s-shopbag","pe-7s-share","pe-7s-server","pe-7s-search","pe-7s-film","pe-7s-science","pe-7s-disk","pe-7s-ribbon","pe-7s-repeat","pe-7s-refresh","pe-7s-add-user","pe-7s-refresh-cloud","pe-7s-paperclip","pe-7s-radio","pe-7s-note2","pe-7s-print","pe-7s-network","pe-7s-prev","pe-7s-mute","pe-7s-power","pe-7s-medal","pe-7s-portfolio","pe-7s-like2","pe-7s-plus","pe-7s-left-arrow","pe-7s-play","pe-7s-key","pe-7s-plane","pe-7s-joy","pe-7s-photo-gallery","pe-7s-pin","pe-7s-phone","pe-7s-plug","pe-7s-pen","pe-7s-right-arrow","pe-7s-paper-plane","pe-7s-delete-user","pe-7s-paint","pe-7s-bottom-arrow","pe-7s-notebook","pe-7s-note","pe-7s-next","pe-7s-news-paper","pe-7s-musiclist","pe-7s-music","pe-7s-mouse","pe-7s-more","pe-7s-moon","pe-7s-monitor","pe-7s-micro","pe-7s-menu","pe-7s-map","pe-7s-map-marker","pe-7s-mail","pe-7s-mail-open","pe-7s-mail-open-file","pe-7s-magnet","pe-7s-loop","pe-7s-look","pe-7s-lock","pe-7s-lintern","pe-7s-link","pe-7s-like","pe-7s-light","pe-7s-less","pe-7s-keypad","pe-7s-junk","pe-7s-info","pe-7s-home","pe-7s-help2","pe-7s-help1","pe-7s-graph3","pe-7s-graph2","pe-7s-graph1","pe-7s-graph","pe-7s-global","pe-7s-gleam","pe-7s-glasses","pe-7s-gift","pe-7s-folder","pe-7s-flag","pe-7s-filter","pe-7s-file","pe-7s-expand1","pe-7s-exapnd2","pe-7s-edit","pe-7s-drop","pe-7s-drawer","pe-7s-download","pe-7s-display2","pe-7s-display1","pe-7s-diskette","pe-7s-date","pe-7s-cup","pe-7s-culture","pe-7s-crop","pe-7s-credit","pe-7s-copy-file","pe-7s-config","pe-7s-compass","pe-7s-comment","pe-7s-coffee","pe-7s-cloud","pe-7s-clock","pe-7s-check","pe-7s-chat","pe-7s-cart","pe-7s-camera","pe-7s-call","pe-7s-calculator","pe-7s-browser","pe-7s-box2","pe-7s-box1","pe-7s-bookmarks","pe-7s-bicycle","pe-7s-bell","pe-7s-battery","pe-7s-ball","pe-7s-back","pe-7s-attention","pe-7s-anchor","pe-7s-albums","pe-7s-alarm","pe-7s-airplay"],
						"requiredBy":"[data-bullet*=\"pe-7s-\"]"
					}
				]
			}
		</script>
		<div id="veu" class="vih">
<div class="nav-container">
</div>

<div class="main-container">
</div>

		</div>

		<a class="vml vih" href="#" target="_blank">Buy Now</a>

		<script src="js/jquery.js"></script>

		
        <script src="theme/js/bootstrap.min.js"></script>
        <script src="theme/js/flexslider.min.js"></script>
        <script src="theme/js/lightbox.min.js"></script>
        <script src="theme/js/masonry.min.js"></script>
        <script src="theme/js/twitterfetcher.min.js"></script>
        <script src="theme/js/spectragram.min.js"></script>
        <script src="theme/js/ytplayer.min.js"></script>
        <script src="theme/js/countdown.min.js"></script>
        <script src="theme/js/smooth-scroll.min.js"></script>
        <script src="theme/js/parallax.js"></script>


        <script type="text/javascript">
        	$(window).load(function(){	
        		if(window.mr_parallax != undefined){
        			window.mr_parallax.callback = function(element){
        				
        				if( (!$(element).hasClass('parallax'))  &&  $(element).is('section:nth-of-type(1), header:nth-of-type(1)')){
        					$(element).find('.background-image-holder').each(function(){
        						$(this).css('top','0px');
        						window.mr_parallax.mr_setTranslate3DTransform($(this).get(0), 0);
        					});
        				}else if($(element).hasClass('parallax')  &&  $(element).is('section:nth-of-type(1), header:nth-of-type(1)')){	
        					if(!$('.viu nav').hasClass('absolute') && !$('.viu nav').hasClass('transparent'))
        					{
        						$(element).find('.background-image-holder').css('top', -($('.viu nav').outerHeight(true)));
        					}
        					else{
        						$(element).find('.background-image-holder').css('top', 0);	
        					}
        				}else if(!$(element).hasClass('parallax')  &&  !$(element).is('section:nth-of-type(1), header:nth-of-type(1)')){
        					$(element).find('.background-image-holder').each(function(){
        						$(this).css('top','0px');
        						window.mr_parallax.mr_setTranslate3DTransform($(this).get(0), 0);
        					});
        				}else if($(element).hasClass('parallax')  &&  !$(element).is('section:nth-of-type(1), header:nth-of-type(1)')){
        					$(element).find('.background-image-holder').each(function(){
        						$(this).css('top','0px');
        						window.mr_parallax.mr_setTranslate3DTransform($(this).get(0), 0);
        					});
        				}
        			};
        		}
        	});
        </script>
        <script type="text/javascript">
        	    $('.viu').on('mouseenter', '.offscreen-container', function(){
        	    	// /$('.vnj').remove();
        	    });
        	    $('.viu').on('click', '.offscreen-toggle', function(){
        	    	$('.offscreen-container a').not('.close-nav').unbind('click');
        	    	$('.vnj').addClass('reveal-nav');
        	    	$('body').addClass('has-offscreen-nav');
        	    	$('.vnj').each(function(){
        	    			$(this).addClass('reveal-nav');
        	    			$(this).css('left', (1 * $(this).attr('data-left')) + (1 * $('.vjc').outerWidth(true)) );
        	    			//$(this).css('left', (1 * $(this).attr('data-left') + $('.vjc').outerWidth(true) ));
        	    	});
        	    });
        	    $('.viu').on('click', '.main-container, .offscreen-container .close-nav', function(){
        	    	if($('body').hasClass('has-offscreen-nav')){
        	    		$('.vnj').each(function(){
        	    			$(this).removeClass('reveal-nav');
        	    			$(this).css('left', (1 * $(this).attr('data-left')));
        	    		});
        	    		$('.offscreen-container').removeClass('reveal-nav');
        		    	$('.main-container').removeClass('reveal-nav');
        		    	$('nav').removeClass('reveal-nav');
        	    	}
        	    });
        </script>

		
		
		
		<script src="js/alterClass.js"></script>
		<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
		<script src="js/storage2.js"></script>
		<script src="js/reInit.js"></script>
		<script src="js/simpleModal.js"></script>
		<script src="js/jsZip.js"></script>
		<script src="js/saveAs.js"></script>
		<script src="js/init.js"></script>
		
		
	</body>
</html>